[React] Nested Routes, Outlet

중첩 라우팅

중접 라우팅(nested routing)

• 라우팅 맵핑을 최상위 컴포넌트만이 아니라 여러 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법이다.

import { Routes, Route } from 'react-router-dom';
function App() {
  
  return (
      <Routes>
  		<Route path="/about/member" element={ <div>멤버들</div> } />
		<Route path="/about/location" element={ <div>회사위치</div> } />
      </Routes>
  );
}

import { Routes, Route } from 'react-router-dom';
function App() {
  
  return (
    <Routes>
		<Route path="/about" element={ <About/> } >  
 			<Route path="member" element={ <div>멤버들</div> } />
  			<Route path="location" element={ <div>회사위치</div> } />
		</Route>
    </Routes>
  );
}

-> 하지만, 위처럼 코드짜면
/about/member 이나 /about/location 에 접속해도 About창에 해당되는 내용만 렌더링 된다. 저 member와 location 라우터들은 About 라우터에 포함되는 것이기 때문에 About 컴포넌트 안에서 어디에 저 포함되는 라우터들을 띄울 것인지 작성해주어야한다.

Outlet

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

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}

부모 라우터 컴포넌트에서 Outlet을 import 해준 후 서브 페이지가 보여질 위치를 Outlet으로 지정해줌.

Outlet 없이 nested routing

/* App.js */
<Routes>
  <Route path="/" element={<Home />}></Route>
  <Route path="/about/*" element={<About />}></Route>
</Routes>

/about/* 와 같이 와일드 카드(*)를 사용해서 about/ 주소 뒤에 무언가 더 올 수 있다고 명시

function About() {
  return (
    <div>
      <div>
        <h2>여기는 About 페이지입니다.</h2>
        <p>대충 쇼핑몰 페이지라는 뜻</p>
      </div>
      <Routes>
        <Route path="/member" element={<Memeber />}></Route>
		<Route path="/location" element={<Location />}></Route>
      </Routes>
    </div>
  );
}

서브 페이지가 보여질 위치에 Routes와 Route를 작성해준다.