[React] Nested Routes

중첩 라우팅(nested routing)이란 여러 유사한 페이지를 필요로 할 때 사용된다.

 

예를 들어, 회사 정보를 보여주는 /about 페이지가 있는데
멤버 정보를 보여주는 /about/member 페이지와
회사 위치 정보를 보여주는 /about/location 페이지도 만든다고 하면

import React from "react";
import { Route, Routes, BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/about" element={<About />}/>
        <Route path="/about/member" element={<div>멤버임</div>}/>
        <Route path="/about/location" element={<div>위치 정보임</div>}/>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

이런 식으로 코드를 작성할 수 있다.

 

하지만 위 방법이 아닌 중첩 라우팅을 사용하면 라우트 작성이 더 간단해지고,
중첩된 element들을 동시에 보여준다는 장점이 있다.

import React from "react";
import { Route, Routes, BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/about" element={<About />}>
          <Route path="member" element={<div>멤버임</div>}/>
          <Route path="location" element={<div>위치 정보임</div>}/>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

중첩 라우팅을 사용하여 코드를 작성한 경우,
/about/member 페이지에 접속하면
/about 페이지와 /about/member 페이지의 elements를 보여주는 것이다.

 

하지만 element를 동시에 보기 위해서는
Outlet 태그를 사용해줘야 한다.

중첩된 element를 <About /> 페이지에 보여주고 싶은 곳에
<Outlet></Outlet>을 작성해주면 된다.

import React from 'react';
import { Outlet } from 'react-router-dom';

function About() {
  return (
    <div>
      회사 정보임
      <Outlet></Outlet>
    </div>
  );
}

export default About;

즉, 중첩 라우팅을 사용하면 /about/member 페이지 접속 시에
회사 정보와 멤버 정보를 둘 다 보여줄 수 있으며
멤버 정보를 보여줄 위치도 지정할 수 있다.

 

/about 접속 시 (회사 정보만 나옴)

/about/member 접속 시 (회사 정보와 멤버 정보 나옴)