Switch→ Routes

<Routes>
	<Route path="/">
		<Home />
	</Route>
	<Routes>
	<Route path="/posts">
		<Home />
	</Route>
</Routes>

useHistory → useNavigate

import {useNavigate} from 'react-router'
const navigate = useNavigate();
navigate("/"); // 입력한 path로 이동 
navigate(-1); // goBack()과 동일한 역할

useRouteMatch가 사라짐. 대신 상대 경로를 쓸 수 있게 됨.

import { Link, Outlet, useParams } from "react-router-dom";

function User() {
  const { username } = useParams();

  return (
    <div>
      <div>
        <Link to=""> // 현재 경로
          @{username}
        </Link>
        <Link to="about">About</Link> // 현재경로/about
      </div>
      <Outlet />
    </div>
  );
}

export default User;

• <Link to=""> → 현재 경로
• <Link to="about"> → 현재 경로/about
• <Link to="/about"> → /about

Route에 children이나 component 사용 X. 대신 element 사용

<Routes>
      <Route path="/" element={<Home />} />
      <Route path="/posts/:id" element={<Post />} />
      <Route path="/users/:username" element={<User />} />
      <Route path="/optional/:value" element={<Optional />} />
      <Route path="/optional" element={<Optional />} />
</Routes>

• 이런식으로 element를 사용해야 한다!

Route는 Routes의 직속 자식이어야 한다

즉, <Route>를 쓰려면 항상 <Routes>로 감싸주어야 한다는 이야기

Route에 exact Prop이 사라짐. 서브 경로가 필요한 경우 path에 * 표시