react-router-dom : 페이지 이동

패키지 설치 (yarn)

yarn add react-router-dom

 

 

페이지 생성

 

페이지 넘어가는 경로? 만들기

// Router.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/works" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

App.jsx에서 Router를 가져온다.

// App.jsx

import "./App.css";
import Router from "./shared/Router";

function App() {
  return <Router />;
}

export default App;

 

주소 검색 이동

...localhost:3000/   ➡️ Home.jsx
...localhost:3000/about   ➡️ About.jsx
...localhost:3000/contact   ➡️ Contact.jsx
...localhost:3000/works   ➡️ Worsk.jsx