react-router outlet

Outlet

Outlet은 해당 자식 라우트 컴포넌트를 렌더링 한다.

중첩 라우트 컴포넌트를 통해 상위 컴포넌트를 레이아웃화 할 수 있고, {children}을 사용하는 것처럼 레이아웃화 할 수 있다.

 

 

기존에는 children으로 받아서 레이아웃을 구성했다.

아래 코드는 outlet을 활용한 방법이다.

 

코드 예제

App.jsx

import "./App.css";
import Router from "./shared/Router";

function App() {
  return (
    <div className="App">
      <Router />
    </div>
  );
}

export default App;

 

app 컴포넌트에 router를 연결했다.

 

 

Router.js

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from "../pages/Main";
import Detail from "../pages/Detail";
import Mypage from "../pages/Mypage";
import Join from "../pages/Join";

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />}>
          <Route path="/mypage" element={<Mypage />} />
          <Route path="/detail" element={<Detail />} />
        </Route>
        <Route path="/join" element={<Join />} />
      </Routes>
    </BrowserRouter>
  );
}

 

Route를 중첩으로 사용하여 '/' 경로일 때 보이는 Main 컴포넌트에 outlet으로 설정하여 하위 컴포넌트를 감싸주었다.

 

 

Main.jsx

import React from "react";
import { Outlet } from "react-router-dom";
import Header from "../components/Header";
import Footer from "../components/Footer";

export default function Main() {
  return (
    <div>
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
}

 

공통으로 보일 Header 컴포넌트와 Footer 컴포넌트를 넣어서 /mypage와 /detail 일 경우 header와 footer 가 나올 수 있게 만들었다.

 

 

Mypage.jsx

import React from "react";

export default function Mypage() {
  return <div>Mypage</div>;
}

 

 

Join.jsx

import React from "react";

export default function Join() {
  return (
    <div>
      <br />
      <br />
      회원가입 페이지 입니다. <br /> 이 화면은 헤더와 푸터가 없습니다
    </div>
  );
}

 

 

결과화면

메인

 

 

마이페이지 /mypage

회원가입 페이지 /join

 

 

 

 

공식문서

Outlet v6.22.0 | React Router