react-router

- 보통의 웹 서비스는 URL을 기준으로 화면을 표시한다

- 리액트는 싱글 페이지 애플리케이션의 UI를 만드는 자바스크립트 라이브러리이다.

- 리액트에서 사용자가 요청한 URL을 이용하여 특정 컴포넌트를 표시하도록 하기 위해서는 react-router라는 외부 라이브러리를 사용해야 한다

 

npm install --save react-router-dom
npm install --save-dev @types/react-router-dom

---

- Switch -> Routes 로 변경

https://reactrouterdotcom.fly.dev/docs/en/v6/upgrading/v5#upgrade-all-switch-elements-to-routes

This is the same app in v6:

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

 

- exact 는 이제 기본값이므로 제거

https://reacttraining.com/blog/react-router-v6-pre/

You don't need to use an exact prop on <Route path="/"> anymore. This is because all <Route> paths match exactly by default

 

https://github.com/remix-run/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links

<Route exact> is gone. Instead, routes with descendant routes (defined in other components) use a trailing * in their path to indicate they match deeply

// This is a React Router v6 app
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

---

react-router 버전업되면서 코드가 변경됨

상세한 라우터 설정이 아닌 기본 라우터 사용법이라 딱히 설명안하고 코드로만 이해가능

https://github.com/gusrl6394/react-router-todo-list

 

결과)