react-router-dom 사용하기

조금 더 사이트를 동적으로 만들고 싶다면 react-router-dom사용이 필수적이다.

여러 기능들이 있지만 많이 쓰는 요소만 정리한다.

1. react-router-dom 설치

npm install react-router-dom

2. 요소들을 web link에 따라 다르게 작동시키고 싶을 때

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
);

App.js

import { Route, Routes } from "react-router-dom";
import FirstPage from "./firstPage";
import { PrivacyPolicy, TermsOfService } from "./footerMenu";
import { Login } from "./login";
import Dashboard from "./dashboard";

function App() {
  return (
    <div>
        <Routes>
            <Route path="/" element={<FirstPage/>}></Route>
            <Route path="/login" element={<Login/>}></Route>
            <Route path="/dashboard" element={<Dashboard/>}></Route>
            <Route path="/terms-of-service" element={<TermsOfService/>}></Route>
            <Route path="/privacy-policy" element={<PrivacyPolicy/>}></Route>
        </Routes>
    </div>
  );
}

export default App;

이런식으로 Routes가 Route를 감싸는 형식으로 존재해야 한다.

3. Link활용하기
   단순히 a태그를 사용하면 웹 사이트 전체가 리로딩되면서 로딩시간이 길어진다. 이를 줄이기 위해 Link태그를 이용해서 부분만 리로딩한다.

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

.
.
.

<Link to="/privacy-policy">Privacy Policy</Link>

이런식으로 a태그 자리에 Link를 쓰면 된다.

4. useNavigate
   조건에 따라 로그인이 안되어있으면 login페이지로 redirect하고 싶을 때가 있다. 이때 다음과 같이 써주면 자연스레 쓸 수 있다.

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

.
.
.

const navigate = useNavigate();

  useEffect(() => {
    axios.get('/api/auth/test')
      .then(response => {
        console.log(response)
      })
      .catch(error => {
        console.error('Authentication error:', error);
        navigate('/login');
      });
  }, [navigate]);