React Router v6 설정하기 / match param, protectedRoute

리액트 라우터 설정법을 알아보자

일단 react-router-dom v6를 설치해준다

yarn add react-router-dom v6

 

App.tsx의 BrowserRouter에 basename을 정해준다.(optional)
basename은 url의 prefix를 설정한다. (/rumi-space로 지정하면 모든 router list의 url 앞에 /rumi-space가 붙는다.)

import { BrowserRouter } from 'react-router-dom';
import Layout from 'pages/Layout';
import './App.css';

function App() {
  return (
    <div className="App">
      <BrowserRouter basename='/rumi-space'>
        <Layout/>
      </BrowserRouter>
    </div>
  );
}

export default App;

네비게이션이나 header, footer를 고정으로 두고, 상태나 url 매칭 여부에 따라 컨트롤하기위해 BrowerRouter안에 Layout 컴포넌트를 넣어줬다.

 

Layout에는 헤더랑 Footer가 있고 그 안에 Route를 가지고 있는 AppRouter를 두었다.

import AppRouter from "routes/AppRouter";

const Layout = () => {
  return (
    <div>
      <header>header</header>
        <AppRouter />
      <footer>footer</footer>
    </div>
  );
};

export default Layout;

import Main from "pages/Main";
import One from "pages/One";
import Two from "pages/Two";
import { Route, Routes } from "react-router-dom";

const AppRouter = () => {
  return (
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="/one" element={<One />} />
      <Route path="/two/:twoId/detail" element={<Two />} />
    </Routes>
  );
};

export default AppRouter;

 

http://localhost:3000/rumi-space/ 로 들어가게되면 Main 컴포넌트가 보일 것.
http://localhost:3000/rumi-space/two/32/detail 로 들어가게되면 파라미터(32)를 'twoId' 라는 key에 담아 보내고,
Two 컴포넌트가 보일것이다.

useParams

파라미터는 useParams로 가져올수있다.

import {useParams} from 'react-router-dom'

const Two = () => {
  const param = useParams();

  return (
    <div>
      here is two comp parameter<h2>{param.twoId}</h2>
    </div>
  );
};

export default Two;

param을 콘솔로 찍어보자

match params

 

ProtectedRoute

토큰인증 유무에 따라, 미인증 상태라면 특정 url로 리다이렉트 시킨다.

import React, { ComponentType, useState } from "react";
import { useLocation } from "react-router-dom";
import { Navigate } from "react-router-dom";

interface ProtectedRouteProps {
  component: ComponentType;
}

/**
 * 인증이 필요하면 ProtectedRoute 를 사용
 */
export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({component : Component}) => {
  const location = useLocation();
  console.log('location',location)

  // 로그인 상태를 가져와서 판단
  return isLogin ? <Component/> : <Navigate replace to="/" />;
};

 

사용

<Route path="/two/:twoId/detail" element={<ProtectedRoute component={Two}/>} />