[React] 리액트 라우터 (React Router) / 아울렛 (Outlet)

• 리액트 라우터 공식 문서 : 
  https://reactrouter.com/en/main

Home v6.4.4

 

사용 방법

1. 패키지 다운받기 yarn add / npm i react-router-dom

2. createBrowserRouter({}) 로 함수 내 path, element, errorElement 요소를 통해 경로 및 보여줄 화면 지정

3. 적용해줄 요소에 RouterProvider 태그로 감싸주기  

 

• 사용 예시 코드 :

 

import{
  RouterProvider,
  createBrowserRouter,
  Routes,
  Route
} from 'react-router-dom';


const router = createBrowserRouter([
  {
    path:'/',
    element: <p>Hi</p>
  },
  {
    path:'/videos',
    element: <p>trending Videos</p>
  }
])

function App() {

  return (
    <RouterProvider router={router} />
  );
}

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import{
  RouterProvider,
  createBrowserRouter,
} from 'react-router-dom';
import NotFound from './pages/NotFound';
import Videos from './pages/Videos';
import VideoDetail from './pages/VideoDetail';

const router = createBrowserRouter([
  {
    path:'/',
    element: <App />,
    errorElement : <NotFound />,
    children : [{
      index : true,
      element : <Videos />
    },
    {
      path : 'videos',
      element : <Videos />
    },
      {
      path : 'videos/:keyword',
      element : <Videos />
    }, {
      path: 'videos/watch/:videoId',
      element : <VideoDetail />
    }]
  }
])


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

 

• 아울렛 공식 문서 :

https://reactrouter.com/en/main/components/outlet

Outlet v6.8.1

 

상위 요소의 children 요소로 넣어줄 위치에 <Outlet/> 추가해주기

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet />
    </div>
  );
}