HYEWON JUNG의 개발일지
React router dom 본문
Router Dom 이란?
react 상에서 여러페이지를 가진 웹을 만들 수 있게 해주는 패키지
Router Dom 사용법
각각 만들고자 하는 페이지 컴포넌트를 만들고 router.js 에 import해와서 <BrowserRouter> 안에 <Routes> 안에 <Route>형태로 사용한다.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Works from "../pages/Works";
import Contact from "../pages/Contact";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="Contact" element={<Contact/>}/>
<Route path="Works" element={<Works/>}/>
<Route path="About" element={<About/>}/>
</Routes>
</BrowserRouter>
)
}
export default Router ;
그리고 App 컴포넌트에 import 해준다.
import Router from './shared/Router';
function App() {
return <Router/>;
}
React router dom Hooks
useNavigate
- 페이지를 옮기는 훅
import React from 'react'
import { useNavigate } from 'react-router-dom'
function Home() {
const navigate = useNavigate();
return (
<div>
<div>Home </div>
<button onClick={()=>{navigate("/Works")}}>works로이동</button>
</div>
)
}
export default Home
Home에서 Works로 옮길 때 useNavigate를 만들어준 뒤 이벤트에서 Works의 path를 입력해주면 된다.
useLocation
const location = useLocation();
콘솔로 찍어보면 현재위치를 알려줌
조건부렌더링에 쓰일 수 있음.
hook은 아니지만 많이 쓰이는 API
LInk
navigate와 같이 페이지를 이동시키지만 a 태그르 기반으로 하기때문에 조금 다르다..(?)
<Link to={"/Contact"}>contact로 이동</Link>
dynamic route
- route path에 유동적인 값을 넣어서 특정페이지로 이동하게끔 구현하는 방법
예제로 todo를 든다면 우선 데이터를 share파일에 추가해서 import해오는 방식으로 하고
export const data =[
{
id :1,
todo :"리액트배우기"
},
{
id :2,
todo :"파이썬배우기"
},
{
id :3,
todo :"스프링배우기"
},
{
id :4,
todo :"노드배우기"
},
{
id :5,
todo :"유니티배우기"
},
]
Work 컴포넌트를 생성해준 뒤 Works컴포넌트에 data를 map해서 풀어주고
function Works() {
return (
<div>Works
<h3>할일목록</h3>
{data.map((item)=>{
return (
<div key={item.id}>
<Link to={`/Works/${item.id}`}>{item.id}{item.todo}</Link>
</div>
)
})}
</div>
)
}
map안에 들어가는 형태는 button으로 navigate를 두든 Link를 하든 페이지 이동 요소를 넣어주고 Router.js에 가서 route 추가해주기
<Route path="Works/:id" element={<Work/>}/>
이때 path = "Works/:id" 에서 :id는 useParams에서 조회할 수 있는 값이 됩니다. 이게 동적인 값을 받는다는 의미입니다.
이제 Work으로 돌아가 useParams를 이용해 params를 받고 Works에서 누른 값에 맡는 페이지로 이동할 수 있도록 해야합니다.
function Work() {
const params = useParams();
const foundData =data.find((item)=>{
return item.id === parseInt(params.id)
}); //해당 id에 맞는 객체만
console.log(foundData)
return (
<div>
<h3>할 일 :{foundData.todo}</h3>
</div>
)
}
이렇게 하면 각 데이터를 눌렀을 때 해당 값만 보이는 페이지가 만들어집니다.
'React' 카테고리의 다른 글
axios get post delete patch (0) | 2023.11.29 |
---|---|
redux toolkit (1) | 2023.11.28 |
children 활용하기 (0) | 2023.11.13 |
redux payload, Ducks (1) | 2023.11.12 |
Redux (0) | 2023.11.10 |