Next에서 nested routes를 사용하려면 pages에서 폴더안에 폴더를 만들어 index.tsx 파일을 만들어 주면 쉽게 구현할 수 있다.
React는 그런 기능이 없기 때문에 Outlet을 사용하여 따로 설정을 해주어야 한다.
Route로 다른 Route들을 감싸는 것을 라우트 중첩이라고 한다.
예를 들어 마이페이지에서 내 정보를 보고싶은 경우, 중첩 라우팅을 사용한 접속 경로는 아래와 같다.
localhost:3000/mypage
localhost:3000/mypage/profile
중첩 라우팅을 사용하려면 상위 Route 컴포넌트에
Outlet을 추가해주어야 한다.
Outlet이 작성된 위치에 하위 컴포넌트들이 위치하게 된다.
import React from 'react';
import { Link, Outlet } from 'react-router-dom';
const Mypage = () => {
return (
<nav>
<ul>
<li>
<Link to="/profile">Profile</Link>
</li>
<li>
<Link to="/review">Review</Link>
</li>
</ul>
<Outlet /> //이 위치에 <Profile />과 <Review />가 위치하게 됨
<nav/>
);
};
export default Mypage;
그리고 Route를 설정해주는 파일에서 중첩 라우팅이 필요한 부분에 아래와 같이 적용시켜준다.
import { Route, Routes } from "react-router-dom";
import Home from "./Home";
import Mypage from "./Mypage";
import Profile from "./Profile";
import Review from "./Review";
export default function App() {
return (
<Routes>
<Route path="home" element={<Home />} />
<Route paht="mypage" element={<Mypage />}>
<Route path="profile" element={<Profile />} />
<Route path="review" element={<Review />} />
</Route>
</Routes>
);
}
export default App;
Outlet 대신 와일드 카드를 사용해서 mypage/ 주소 뒤에 무언가 더 올 수 있다고 명시를 해줄 수 있다.
import { Route, Routes } from "react-router-dom";
import Home from "./Home";
import Mypage from "./Mypage";
import Profile from "./Profile";
import Review from "./Review";
export default function App() {
return (
<Routes>
<Route path="home" element={<Home />} />
<Route paht="mypage/*" element={<Mypage />} /> // 와일드 카드 사용
</Routes>
);
}
export default App;
이후 해당 컴포넌트로 가서 서브 페이지로 렌더링할 Routes와 Route를 작성해주면 된다.
import React from 'react';
import { Link, Route, Routes } from 'react-router-dom';
const Mypage = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/profile">Profile</Link>
</li>
<li>
<Link to="/review">Review</Link>
</li>
</ul>
<nav/>
<Routes>
<Route path="profile" element={<Profile />} />
<Route path="review" element={<Review />} />
</Routes>
</>
);
};
export default Mypage;