Nested Routes는 route 안에 있는 또 다른 route입니다.
React Router 가 v6로 바뀌면서 Nested Routes 만 아니라 Route 사용하는 방법이 바뀌었습니다. 전 5 버전과 현재 6 버전 사용법을 비교하였습니다.
React Router v5
nested routes 구현하는 방법은 자식 route를 부모 route의 element 내부에 작성하는 것입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| import { BrowserRouter, Switch, Route } from 'react-router-dom'; import Coin from './routes/Coin'; import Coins from './routes/Coins';
function Router() { return ( <BrowserRouter> <Switch> <Route path="/:coinId"> <Coin /> </Route> <Route path="/"> <Coins /> </Route> </Switch> </BrowserRouter> ); } export default Router;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| import { Switch, Route } from 'react-router-dom';
function Coin() { return ( <Container> <Header> <Title></Title> </Header> <Switch> <Route path="price"> <Price /> </Route> <Route path="chart"> <Chart /> </Route> </Switch> </Container> ); }
export default Coin;
|
React Router v6
nested routes를 구현하는 방법은 두 가지가 있습니다. 6 버전에서는 Switch 가 Routes로 변경됐습니다.
첫 번째
부모 route의 path 마지막에 /*를 적어 명시적으로 이 route의 내부에서 nested route 가 render 될 수 있음을 표시하고 자식 route를 부모 route의 element 내부에 작성하는 방법입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Coin from './routes/Coin'; import Coins from './routes/Coins';
function Router() { return ( <BrowserRouter> <Routes> <Route path="/:coinId/*" element={<Coin />}></Route> <Route path="/" element={<Coins />}></Route> </Routes> </BrowserRouter> ); }
export default Router;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| import { Routes, Route } from 'react-router-dom';
function Coin() { return ( <Container> <Header> <Title></Title> </Header> <Routes> <Route path="price" element={<Price />}></Route> <Route path="chart" element={<Chart />}></Route> </Routes> </Container> ); }
export default Coin;
|
두 번째
자식 route 를 부모 element의 내부가 아닌 Router
내부에 작성하는 방법입니다. 그리고 이 자식 Route들이 어디에 render 될지 부모의 element 안에 Outlet
을 이용해 표시해 주면 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Chart from './routes/Chart'; import Coin from './routes/Coin'; import Coins from './routes/Coins'; import Price from './routes/Price';
function Router() { return ( <BrowserRouter> <Routes> <Route path="/:coinId" element={<Coin />}> <Route path="price" element={<Price />} /> <Route path="chart" element={<Chart />} /> </Route> <Route path="/" element={<Coins />}></Route> </Routes> </BrowserRouter> ); }
export default Router;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| import { Outlet, Routes, Route } from 'react-router-dom';
function Coin() { return ( <Container> <Header> <Title></Title> </Header> <Outlet /> </Container> ); }
export default Coin;
|
참고