27일차 (react-router-dom :outlet)

outlet은 children과 같다고 보면 된다. 

 

하위 라우터를 감싸는 상위 라우터에서 하위 컴포넌트를 출력하고 싶은 위치에 <Outlet/>을 넣어주면 된다.

import React from "react";
import { Outlet, useNavigate } from "react-router-dom";

function Main() {
  const navigate = useNavigate();
  const logoutBtn = () => {
    navigate("/");
  };

  return (
    <div>
      <header>
        <p>🏠</p>
        <button onClick={logoutBtn}>로그아웃</button>
        <hr />
      </header>
      <Outlet />
    </div>
  );
}

export default Main;

 

그리고 Router.js 페이지에서 상위 Route 안쪽으로 감싸주기만 하면 된다. 

<BrowserRouter>
	<Routes>
		<Route path="/main/:id" element={<Main />}>
  			<Route path="home" element={<Home />}></Route>
  			<Route path="todolist" element={<TodoList />}></Route>
		</Route>
	</Routes>
</BrowserRouter>