[React] Nested Routes

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
// Router.tsx
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
// Coin.tsx
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
// Router.tsx
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
// Coin.tsx
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
// Router.tsx
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
// Coin.tsx
import { Outlet, Routes, Route } from 'react-router-dom';

function Coin() {
return (
<Container>
<Header>
<Title></Title>
</Header>
<Outlet />
</Container>
);
}

export default Coin;

참고

Share