React Router v6：路由管理的最新进展

天涯学馆2024-05-28 0:38

React Router v6 是 React 应用程序路由管理的一个重大更新，它引入了许多改进和简化，包括对嵌套路由的更友好处理，以及对钩子函数的使用。

2500G计算机入门到高级架构师开发资料超级大礼包免费送！

1. Routes 重构

在 v6 中，<Route> 组件被替换为 <Routes> 组件，后者用于包裹所有路由。此外，Switch 组件不再存在，因为 <Routes> 已经实现了类似于 Switch 的行为，只会匹配并渲染第一个匹配的路由。

jsx 复制代码 
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/*" element={<Users />} /> {/* 通配符支持 */}
      </Routes>
    </Router>
  );
}

2. 使用 element 属性

路由现在通过 element 属性指定要渲染的组件，而不是通过 component 或 render 函数。

jsx 复制代码 
<Route path="/profile/:userId" element={<Profile />} />

3. Hook API

React Router v6 引入了新的钩子函数，如 useHistory, useLocation, useParams, 和 useNavigate，这些钩子允许在组件内部直接处理导航。

jsx 复制代码 
import { useParams } from 'react-router-dom';

function Profile() {
  const { userId } = useParams();
  return <div>Profile of user {userId}</div>;
}

useNavigate 钩子返回一个 navigate 函数，用于在组件内部导航。

jsx 复制代码 
import { useNavigate } from 'react-router-dom';

function ProfileForm() {
  const navigate = useNavigate();
  const handleSubmit = (event) => {
    event.preventDefault();
    // 提交表单后导航到另一个页面
    navigate('/success', { replace: true }); // 替换当前历史记录
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

5. 懒加载和代码分割

React Router v6 支持动态导入，这有助于实现代码分割，提高应用的加载速度。

jsx 复制代码 
<Route path="/lazy" element={import('./LazyComponent').then((mod) => mod.LazyComponent)} />

6. 404 页面

处理未找到的路由，可以设置一个通配符路由来捕获所有未匹配的路径。

jsx 复制代码 
<Route path="*" element={<Error404 />} />

7. 嵌套路由

嵌套路由的处理更加简洁，使用 Routes 和 Route 的组合即可。

jsx 复制代码 
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainLayout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="users" element={<Users />}>
            <Route path=":userId" element={<User />} />
          </Route>
        </Route>
        <Route path="*" element={<Error404 />} />
      </Routes>
    </Router>
  );
}

8. 路由保护和权限控制

在React Router v6中，可以使用 useEffect 或 useLayoutEffect 钩子以及 useNavigate 来实现路由保护，确保用户在登录后才能访问受保护的路由。

jsx 复制代码 
import { useNavigate, useLocation } from 'react-router-dom';

function PrivateRoute({ children }) {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuthenticated()) {
      navigate('/login', { replace: true });
    }
  }, [navigate]);

  return isAuthenticated() ? children : null;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<PublicRoute><Home /></PublicRoute>} />
        <Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </Router>
  );
}

在这个例子中，isAuthenticated() 是一个假设的函数，检查用户是否已登录。如果用户未登录，他们将被重定向到登录页面。

9. 重定向和重定位

在 v6 中，可以使用 Navigate 组件来实现重定向。它类似于一个特殊的元素，会触发导航到指定的URL。

jsx 复制代码 
import { Navigate } from 'react-router-dom';

function PrivateRoute({ children }) {
  if (!isAuthenticated()) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

10. 路由参数和查询字符串

在 v6 中，你可以使用 useParams 钩子获取路由参数，使用 useLocation 获取查询字符串。

jsx 复制代码 
import { useParams, useLocation } from 'react-router-dom';

function Profile() {
  const { userId } = useParams();
  const query = new URLSearchParams(useLocation().search);
  const searchParam = query.get('paramName');

  return <div>Profile of user {userId} with search param: {searchParam}</div>;
}

11. 自定义路由匹配

React Router v6 允许你通过 path-to-regexp 库自定义路由匹配规则，但通常情况下，标准的路径模式已经足够使用。

12. 高阶组件（HoC）

尽管 v6 中不再推荐使用高阶组件，但你仍然可以通过包装组件来实现特定逻辑，如路由保护。

jsx 复制代码 
function PrivateRoute({ children }) {
  if (!isAuthenticated()) {
    return <Navigate to="/login" replace />;
  }

  return <>{children}</>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<PublicRoute><Home /></PublicRoute>} />
        <Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </Router>
  );
}

13. 路由事件

React Router v6 提供了一些生命周期事件，如 useRouteMatch、useLocation、useHistory 和 useNavigate。这些钩子可以帮助你在组件中监听路由变化并做出响应。

jsx 复制代码 
import { useLocation } from 'react-router-dom';

function Navbar() {
  const location = useLocation();

  useEffect(() => {
    console.log(`Navigated to ${location.pathname}`);
  }, [location]);

  return /* ... */;
}

14. 路由配置的模块化

为了保持代码的整洁，你可以将路由配置分散到多个模块中，然后在主配置文件中导入并合并它们。

jsx 复制代码 
// routes/users.js
export default [
  { path: '/users', element: <UsersList /> },
  { path: '/users/:id', element: <UserProfile /> },
];

// routes/admin.js
export default [
  { path: '/admin/dashboard', element: <AdminDashboard /> },
  { path: '/admin/users', element: <AdminUsers /> },
];

// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import usersRoutes from './routes/users';
import adminRoutes from './routes/admin';

function App() {
  return (
    <Router>
      <Routes>
        {usersRoutes.map((route, index) => (
          <Route key={index} {...route} />
        ))}
        {adminRoutes.map((route, index) => (
          <Route key={index} {...route} />
        ))}
        {/* 错误页面或404页面 */}
        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </Router>
  );
}

15. 路由守卫（Guard）

你可以创建自定义的守卫函数来决定用户是否可以访问某个路由。这通常用于实现权限验证或数据预加载。

jsx 复制代码 
function requireAuth(nextState, replace) {
  if (!isAuthenticated()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname },
    });
  }
}

// 在路由中使用
<Route path="/protected" onEnter={requireAuth} component={ProtectedComponent} />

在 v6 中，可以使用 useEffect 或 useLayoutEffect 钩子来实现类似的功能。

16. 路由嵌套

虽然在 v6 中不再需要显式地包裹 Switch 组件，但嵌套路由的概念仍然存在。你可以通过在路由配置中嵌套 Routes 来实现。

jsx 复制代码 
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainLayout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="users" element={<Users />}>
            <Route path=":userId" element={<User />} />
          </Route>
        </Route>
        <Route path="*" element={<Error404 />} />
      </Routes>
    </Router>
  );
}

在这个例子中，/users/:userId 路由是在 /users 路由内部定义的，这意味着在访问 /users/someId 时，Users 组件会被渲染，同时 User 组件也会被渲染。

17. 自定义错误处理

React Router v6 不再提供全局错误处理，但你可以通过监听 window.onError 或使用自定义中间件来实现。

18. 代码分割和懒加载

React Router v6 与 Webpack 或其他打包工具很好地配合，可以实现代码分割和懒加载。你可以使用 import() 动态导入组件来实现这一点。

jsx 复制代码 
<Route
  path="/lazy"
  element={
    import('./LazyComponent')
      .then((mod) => mod.LazyComponent)
      .catch((error) => <ErrorBoundary error={error} />)
  }
/>

19. 自定义路由组件

虽然 Route 组件在 v6 中已经非常简单，但你仍然可以创建自己的组件来扩展其功能，例如添加自定义的加载指示器。

20. 服务器端渲染（SSR）

React Router v6 支持服务器端渲染，但需要额外的配置和库，如 react-router-dom/server 和 react-router-dom/browser。

2500G计算机入门到高级架构师开发资料超级大礼包免费送！

相关推荐
WeiXiao_Hyy15 分钟前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
吃杠碰小鸡32 分钟前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone37 分钟前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09011 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农1 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king2 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳2 小时前
JavaScript 的宏任务和微任务
javascript
夏幻灵3 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星3 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_3 小时前
Vue 3 中 watch 的使用详解：监听响应式数据变化的利器
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03使用 1panel面板 部署 php网站04OpenClaw Chrome扩展使用教程 - 浏览器中继控制05Vue-skills的中文文档06Linux下V2Ray安装配置指南07让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南08从零搭建一个 PHP 登录注册系统（含完整源码）09UV安装并设置国内源10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示