[React] react-router v7 적용해보기

리액트 프로젝트 때마다 거의 필수로 사용하는 것 같은 react-router를 공식문서 참조하여 설치해 보겠습니다

 

https://reactrouter.com/home

React Router Home | React Router

 

 

1. 아래 명령어를 터미널에 입력해 설치해 줍니다

npm i react-router

 

 

2. main.tsx 파일에 다음과 같이 코드를 추가합니다

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./app";

const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

 

 

3. 라우팅 방법

- Routes 태그로 감싸고 Route 태그에 특정 path에 보여줄 element를 지정할 수 있습니다

<Routes>
  <Route path="/" element={<App />} />
</Routes>

 

 

- path를 설정하지 않은 route를 한번 더 감싸서 부모 레이아웃을 설정할 수 있습니다

 

헤더/푸터와 같이 여러페이지에서 보여줄 공통 레이아웃이나 인증이 필요한 페이지를 분리하는 등의 경우에서 사용합니다

AuthLayout에서는 Outlet 태그를 사용해야 자식 element를 보여줄 수 있습니다!

const AuthLayout = () => {
  return (<Outlet />);
};

<Route element={<AuthLayout />}>
    <Route path="login" element={<Login />} />
    <Route path="register" element={<Register />} />
</Route>