路由负责定义路径和组件的映射关系。React Router 是一个基于 React 的路由库，它允许你为单页应用程序（SPA）创建页面导航。

注意 : 本文使用React Router v6

React Router v6新特性简介及迁移 - 掘金 (juejin.cn)

安装 React Router

可以通过 npm 或 yarn 来安装它：

npm install react-router-dom
或者
yarn add react-router-dom

react-router-dom 是基于 react-router 的库，专为Web应用程序设计的。它包含了 react-router 的所有功能，所以安装了 react-router-dom 后就不用再安装react-router，并且增加了一些专门用于DOM环境的组件，比如 BrowserRouter、HashRouter、Link、NavLink 等，其中BrowserRouter、HashRouter用于替代react-router中的Router组件，Link、NavLink的作用类似于a标签。

实现路由跳转

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

1. 设置一个 <BrowserRouter>，它将作为路由的容器，使用 HTML5的 history api 实现路由跳转
2. 一个应用程序可以有多个 <Routes>（之前的<Switch>），使用Route组件来定义不同的路由，并将每个路由映射到一个组件，实现嵌套路由
3. 使用 Link 组件进行导航

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

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

以上是使用 React Router 实现页面导航的基本步骤。

参考

React Router (w3schools.com)