npm install react-router-dom@6
<BrowerRouter>
로 감싸서 Router Context를 만들어줘야 react router dom 을 활용할 수 있다. <Route>
안에 path를 지정하고 element에 렌더링할 컴포넌트를 넣으면 된다. <Routes>
는 Route로 생성된 자식컴포넌트 중에 path와 URL이 매칭되는 첫번째 Route의 컴포넌트를 렌더링한다.
*
같은 경우 와일드카드처럼 해당되는 모든 URL에 대해 대응한다. 이 때 순서가 중요한데, 만약 와일드카드로 지정한 <NotFound>
의 라우트가 상단에 배치될 경우, 다른 URL로 라우팅 되야하는 경우에도 <NotFound>
만 라우팅하게 된다. 이는 원래 의도한 동작과는 큰 차이가 있을 것이다.
import ReactDOM from "react-dom/client";
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
// import your route components too
const root = ReactDOM.createRoot(
document.getElementById("root")
);
root.render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="teams" element={<Teams />}>
<Route path=":teamId" element={<Team />} />
<Route path="new" element={<NewTeamForm />} />
<Route index element={<LeagueStandings />} />
<Route path="/*" element={<NotFound />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
);
Link를 이용해서 현재 페이지를 다른 페이지로 navigate 할 수 있다. Link의 한 종류인 <NavLink>
를 이용하면 navbar 중 활성화된 tab을 구현할 수 있다.
import * as React from "react";
import { Link } from "react-router-dom";
function UsersIndexPage({ users }) {
return (
<div>
<h1>Users</h1>
<ul>
{users.map((user) => (
<li key={user.id}>
<Link to={user.id}>{user.name}</Link>
</li>
))}
</ul>
</div>
);
}
useLocation
과 URLSearchParams
를 사용해 queryString 방식으로 동적 라우팅을 구현할 수 있다.
useLocation
은 location 객체를 반환하며, location객체의 search 속성값을 참고하면 queryString을 가져올 수 있다. URLSearchParams
에 location.search를 인자로 넘기면 search는 url의 ?
뒤에 부분을 가져올 수 있다.
import { useNavigate } from "react-router-dom";
export default function Info({ info }) {
const name = info.name;
const navigate = useNavigate();
const handleClick = () => {
// queryString에 정보를 담아 detail 페이지로 넘겨줄 수 있다.
navigate(`/detail?name=${info.name}&age=${info.age}`);
};
return <User onClick={handleClick}>{name}</User>;
}
import { useLocation } from "react-router-dom";
export default function Detail() {
const location = useLocation();
const search = new URLSearchParams(location.search);
let name = search.get("name");
let age = search.get("age");
return (
<div>
<div>User Detail</div>
<span>{name}</span>
<span>{age}</span>
</div>
)
}
useNavigate
는 Link 컴포넌트를 사용하지 않고 페이지가 이동되도록 구현할 수 있다. 인자에 path를 넣어서 동작한다. 데이터를 넣어야할 경우 두 번째 인자에 state를 키로 하는 값으로 객체를 만들어 넣어주면 된다.
location.state를 활용하기 위해 navigate 함수의 첫 번째 인자로 이동할 페이지의 URL인 /detail을 전달하고 두 번째 인자로 state 를 전달합니다. 따라서 state로 info 객체를 전달한다.
import { useNavigate } from "react-router-dom";
export default function Info({ info }) {
const name = info.name;
const nav = useNavigate();
const handleClick = () => {
/* location.state에 정보를 담아 detail로 이동되도록 코드를 작성하세요. */
nav("/detail", { state: info });
};
return <User onClick={handleClick}>{name}</User>;
}
export default function Detail() {
const location = useLocation();
const info = location.state;
let name = info.name;
let age =info.age;
return (
<div>
<div>User Detail</div>
<span>{name}</span>
<span>{age}</span>
</div>
)
Route의 path에 입력된 파라미터 userId를 useParams를 이용해서 받아올 수 있다.<Route path="/endpoint/:id />
형식으로 path를 라우팅 경로를 지정해주어야 한다.
import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
function ProfilePage() {
// Get the userId param from the URL.
let { userId } = useParams();
// ...
}
function App() {
return (
<Routes>
<Route path="users">
<Route path="/users/:userId" element={<ProfilePage />} />
<Route path="me" element={...} />
</Route>
</Routes>
);
}
[참고링크]