🚩router는 각각의 웹페이지로 가기 위한 “경로”이다.

📌 설치하기

npm install react-router-dom@6

🚩index.js

import { BrowserRouter } from "react-router-dom";

.
.
.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    **<BrowserRouter>**
      <App />
    **</BrowserRouter>**
  </React.StrictMode>
);

🚩App.js

**import { Routes, Route } from "react-router-dom";**
.
.
.
function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

-Routes: 상황에 맞게 페이지를 바꿔줌(v5에서는 <Switch>로 쓰임)

-Route: 바뀌는 각각의 페이지를 정의해

-path: 각 페이지의 주소(url 상에서 “/home”)

-element: 지정된 path에 보여주고 싶은 페이지(v5에서는 component로 쓰임)

🚩Homepage.jsx - 1. Link

**import { Link } from "react-router-dom";**
.
.
.
export default function Homepage() {
  return (
    <div>
      <h1>HOME</h1>
      <Link to="/about">GO TO ABOUT PAGE!</Link>
    </div>
  );
}

-라우터간의 이동이 필요할때 사용한다.

-html의 <a>와 비슷함