[React] Router 사용하기

1. react-router-dom  설치

npm install react-router-dom

 

 

2. Router를 사용하는 모든 페이지는 Router태그로 감싸고 Routes 설정하기

path에는 경로를 넣고, 이 경로에 해당하는 페이지를 렌더링 하려면 element로 그 페이지를 설정해줘야함

나는 HeaderPage에서 그 링크를 제공하고 있어서 HeaderPage도 Router안에 넣었음

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { HeaderPage } from "./page/HeaderPage";
import { MainPage } from "./page/MainPage";
import { SignupPage } from './page/SignupPage';
import { LoginPage } from './page/LoginPage';


function App() {
  return (
    <div className="App">             
    <Router>
      <div>
        <HeaderPage />
        <Routes>
          <Route path="/" element={<MainPage />} />
          <Route path="/signup" element={<SignupPage />} />
          <Route path="/login" element={<LoginPage />} />
        </Routes>
      </div>
    </Router>
    </div>
  );
}

 

 

3. HeaderPage.js

import { Button } from "../components/Button";
import { Link } from 'react-router-dom';
import "./HeaderPage.css";

export function HeaderPage() {
    return (
        <header>
            <Link to="/">Header</Link>
            <ul className="fs-6">
                <li>
                    <Link to="/login">
                        <Button message="Login" type="light" outline="true"/>
                    </Link>
                </li>
                <li>
                    <Link to="/signup">Sign up</Link>
                </li>
                <li>
                    <Link to="/about">About</Link>
                </li>
            </ul>
        </header>
    );
}