React > Router 이해하기

설치

npm install react-router-dom

import

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

 

사용법 (v6부터 Switch 에서 Routes로 변경됨)

    <Router>
      <div className="App">
        <Header />
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </nav>
        <main>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </main>
        <Footer />
      </div>
    </Router>