리액트 nested routes Outlet 사용하기

만약에 도메인주소.com/quotes/몇번째게시물/comments라는 주소에 접속하고 싶다면 ?

Route 안에 Route를 작성해주면 된다.

import { Route, Routes } from "react-router-dom";
import QuoteDetail from "./pages/QuoteDetail";

function App() {
  return (
    <>
      <Routes>
        <Route path="/quotes/:quoteId" element={<QuoteDetail/>}>
          <Route path="comments" element ={<h1>Comment</h1>}/>
        </Route>
      </Routes>
    </>
  );
}

export default App;

이런식으로 라우트를 중첩해서 작성한다면

도메인주소.com/quotes/아무거나/comments 에 접속했을때 저 comments element 요소를 띄어준다.