轻松构建React应用的路由：React Router 6.x指南

React Router 6.x：构建单页面应用的终极指南

什么是 React Router？

React Router 是一个强大的路由库，专为 React 应用程序而设计。它让你轻松管理应用程序中的路由，并在不同组件之间切换。

路由基础

路由是应用程序 URL 与组件之间的映射。React Router 中，我们使用 <Route> 组件定义路由。每个路由有两个关键属性：path（URL）和 element（渲染的组件）。

示例：

import { BrowserRouter, Route, Routes } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};

路由参数

路由参数是允许你向路由传递数据的 URL 片段。React Router 使用 <Route> 组件的 params 属性来访问这些参数。

示例：

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:userId" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
};

const User = ({ params }) => {
  return (
    <div>
      <h1>User {params.userId}</h1>
    </div>
  );
};

路由切换

路由切换是在不同路由之间导航。React Router 提供 <Link> 组件（创建指向其他路由的链接）和 <Outlet> 组件（渲染当前活动的路由）。

示例：

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

const App = () => {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Outlet />
    </BrowserRouter>
  );
};

总结

React Router 6.x 是构建单页面应用的强大工具。本指南介绍了路由、路由参数和路由切换等基本概念，帮助你掌握 React 路由。

常见问题解答

1. 如何防止 React Router 中的 404 错误？

   • 确保你的所有路由都定义正确且没有拼写错误。
   • 添加一个通配符路由（例如 <Route path="*" element={<NotFound />} />）以处理未知的 URL。

2. 如何动态设置路由参数？

   • 使用 useParams 钩子获取路由参数，然后将其用作组件的道具。

3. 如何导航到另一个路由？

   • 使用 useNavigate 钩子或 <Link> 组件导航到另一个路由。

4. 如何传递状态到路由组件？

   • 使用 React 上下文或 Redux 等状态管理库在路由组件之间传递状态。

5. 如何防止路由切换时组件卸载？

   • 使用 <Outlet> 组件渲染当前活动的路由，而不用重新加载组件。