React Router

사용자가 요청한 링크주소(URL)에 맞는 페이지를 찾아서 보여주는 것

 

[설치]

 npm i react-router-dom

 

[사용]

• 라우팅 경로별 보일 페이지를 정한다.
• createBrowserRouter를 활용해 라우팅 경로를 관리한다.
• 라우팅 경로 1개당 1개의  dictionary로 관리
• RouterProvider를 사용해 라우팅 경로를 등록

//----- router.tsx

import { createBrowserRouter } from "react-router-dom";
import Root from "./components/Root";



/*
path에 url경로를 적고 element에 경로별 화면을 입력한다.
children에 자식경로를 입력하여 가지치기하며 routing을 관리 

createBrowserRouter([
	{
    	path: "/",
        element: <Root />,
        errorElement <NotFound />,
        children: [
        	{
            	path:"",
                element: <Home />,
            },
            {
            	path: "rooms/:room_pk",
                element: <RoomDetail />
            }
        ]
    }
])
*/


// 라우터 선언
const router = createBrowserRouter([
    {
        path: "",
        element: <Root />
    }
])

export default router;

//-----index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider } from '@chakra-ui/react';



import { RouterProvider } from 'react-router-dom';
import router from './router';


const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);


root.render(
  <React.StrictMode>
    <ChakraProvider>
      <RouterProvider router={router} />  //RouterProvider로 router감싸기      
    </ChakraProvider>
  </React.StrictMode>
);