Outlet 을 사용하여 Navigation 구현하기 (react-router-dom)

Outlet 이란

공식 문서에서 가져왔다.

An should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

// 부모 컴포넌트
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
  },
]);

// 자식 컴포넌트
import { Outlet } from "react-router-dom";

export default function Root() {
  return (
    <>
      {/* all the other elements */}
      <div id="detail">
        <Outlet />
      </div>
    </>
  );
}

예전에 (몇년전...) react-router-dom 을 사용했을 때에는 못봤던거라 뭐지 싶었는데, Angular 의 <router-outlet> 과 거의 똑같아서 금방 이해했다.

 

<Outlet> 은 부모 (parent route elements) 가 자식 (child route elements) 를 렌더링하기 위해 사용되는 것이다. 이렇게 하면 UI 를 중첩해서 보여줄 수 있다. 경로가 정확히 일치하면 해당하는 child elements 를 렌더링하고, 일치하는 경로가 없다면 아무것도 렌더링하지 않는다.

 

Outlet 을 사용해서 Navigation 보여주기

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import {
    createBrowserRouter,
    RouterProvider,
} from "react-router-dom";

import App from './App';
import TodoList from "./TodoList";
import Statistics from "./Statistics";
import Error from "./404";

const router = createBrowserRouter([
    {
        path: "",
        element: <App />,
        errorElement: <Error />,
        children: [
            {
                path: "",
                element: <TodoList />,
            },
            {
                path: "statistics",
                element: <Statistics />
            }
        ]
    },
])


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <RouterProvider router={router} />
  </React.StrictMode>
);

reportWebVitals();

 

App.js

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

import Navigation from "./Navigation";

const App = () => {
    return (
        <div className="App">
            <Navigation />
            <Outlet />
        </div>
    );
};

export default App;

 

Navigation.jsx

import React from 'react';
import { Link } from "react-router-dom";

const Navigation = () => {

    return (
        <nav>
            <ul>
                <li><Link to="/">go to main</Link></li>
                <li><Link to="statistics">go to statistics</Link></li>
            </ul>
        </nav>
    );
};

export default Navigation;

 

예시

 

참고 자료

• https://reactrouter.com/en/main/components/outlet
• https://reactrouter.com/en/main/start/tutorial#nested-routes