[ TIL ] React-router-dom v6 Nested Routes

import {BrowserRouter, Routes, Route} from "react-router-dom";
import Coins from "./Coins";
import Coin from "./Coin";

function Router(){  
  return (
  <BrowserRouter>
    <Routes>
      <Route path="/:coinId/*" element={<Coin/>} />
      <Route path="/" element={<Coins/>} />
    </Routes>
  </BrowserRouter>
  );
  
}

export default Router;

 

router 에서 중첩 route 를 만들고 싶은 곳에 * 붙여준다

 

그리고 중첩 route 만들고 싶은 component 에서 

 

          <Routes>
            <Route path="price" element={<Price />} />
            <Route path="chart" element={<Chart />} />
          </Routes>

 

이렇게 해주면된다. 

 

https://velog.io/@cnsrn1874/React-Router-v6-Nested-Routes

[React-Router v6] Nested Routes