TIL 230413 React-router-dom createBrowserRouter로 보기 편하게 라우터 만들기

<BrowserRouter>
    <Routes>
        <Route path='/' element={<BirthdayCake />} />
        <Route path='/' element={<Save />} />
        <Route path='/bdaycake' element={<BirthdayCake />} />
        <Route path='/todolist' element={<TodoList />} />
        <Route path='/jmc' element={<JMC />} />
    </Routes>
</BrowserRouter>

구질구질한 라우터에 질린 사람 헤쳐 모여~

 

 

라우터를 저렇게 만드는 방법밖에 몰랐는데 새로운 방법을 알게 되었다.

바로 createBrowserRouter 사용하기! 😀👍

 

 

createBrowserRouter

createBrowserRouter를 사용하면 라우터를 생성할 수 있다. 라우팅 정보를 담은 배열을 인자로 넣어주면 된다. 그리고 path에 경로를 설정하고 해당 경로에서 보여줄 컴포넌트를 element에 넣는다. 만약 한번 더 들어가는 경로라면(예: /board/all 과 /board/notice) children에 넣으면 된다. 경로가 계속 타고 간다면 같은 방법으로 타고 갈 수 있도록 정해주면 된다.

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

const Router = createBrowserRouter([
  {
    path: '/',
    element: <Index />,
    children: [
      { path: 'save', element: <Save /> }, // /save
      { path: 'change-bg', element: <ChangeBgColor /> }, // /change-bg
      {
        path: 'board',
        element: <Board />, // /board
        children: [
          {
            path: 'all', 
            element: <AllBoard />, // /board/all
          },
          {
            path: 'notice', 
            element: <HappyBoard />, // /board/notice
          },
          {
            path: 'notice',
            element: <Notice />, // /board/notice
          },
        ],
      },
    ],
  },
]);

export default Router;

 

 

RouterProvider

그리고 만들어 둔 Router를 RouterProvider에 전달해주면 된다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import Router from './Router';

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

 

 

Outlet

하지만 여기서 중요한 점은 Outlet을 사용해야 한다는 점이다! 컴포넌트 안에서 Outlet을 이용해서 Outlet자리에 자식 컴포넌트를 보여줄 것이기 때문이다. Outlet이 바꿔 끼워가며 보여줄 컴포넌트 자리라고 보면 된다. 마치 포토존 프레임 판넬처럼...!

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

const Home = () => {
  return (
    <Container>
      <nav className='nav-menu'>
        <ul>
          <li>
            <a href='/bdaycake'>Birthday Cake</a>
          </li>
          <li>
            <a href='/board/all'>Board</a>
          </li>
          <li>
            <a href='/save'>save</a>
          </li>
          <li>
            <a href='/todolist'>todolist</a>
          </li>
        </ul>
      </nav>
      <div>
        <Outlet /> // 이 자리에 컴포넌트들이 들어가면서 보여진다.
      </div>
    </Container>
  );
};

export default Home;