[React]React Router

a 태그를 이용해서 페이지 이동 -> mpa의 특징이다.

React Router를 이용한 client side rendering

RouteTest

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

const RouteTest = () => {
  return (
    <>
      <Link to="/">HOME</Link>
      <br />
      <Link to="/edit">EDIT</Link>
      <br />
      <Link to="/diary">DIARY</Link>
      <br />
      <Link to="/new">NEW</Link>
      <br />
    </>
  );
};
export default RouteTest;

App.js에서 사용하는법

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import Edit from "./pages/Edit";

import RouteTest from "./components/RouteTest";
function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <div></div>
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/new" element={<New />}></Route>
          <Route path="/edit" element={<Edit />}></Route>
          <Route path="/diary" element={<Diary />}></Route>
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

결과

사용자 정의 훅 -> custom hooks

예시 : react-router-dom의 useParams