시작전

  1. terminal에서 react-router-dom 설치하기 ⇒ npm i react-router-dom

사용법

  1. { BrowserRouter, Routes, Route }

  2. { Link }

  3. { useParams }

  4. { useNavigate }

  5. BrowserRouter / Routes / Route

    1. <BrowserRouter></BrowserRouter> : 덮개…?!
    2. <Routes></Routes> : <Route /> 여러개 있을때 감싸주는 역할
    3. <Route path={"도메인주소 뒤에 붙는 정하고 싶은 주소"} element={컴포넌트} />

src>routes>routing.js

import {BrowserRouter, Routes, Route} from 'react-router-dom';
import HomePage from '../pages/Home';
import SignInPage from '../pages/Signin';
import TodoPage from '../pages/Todo';

function Routing () {
  return <BrowserRouter>
    <Routes>
      <Route path={"/"} element={<HomePage/>}/>
      <Route path={"/todo"} element={<SignInPage />}/>
      <Route path={"/signin"} element={<TodoPage />}/>
    </Routes>
  </BrowserRouter>
}
export default Routing;

src>App.js

import Routing from "./routes/routing";

function App() {

  return <Routing />
}

export default App;