嵌套路由与路由守卫

React Router 提供了强大的路由管理功能，其中嵌套路由和路由守卫是开发复杂应用程序时的重要工具。本章将详细介绍这两种技术的使用方法及其实现细节。

1. 嵌套路由

嵌套路由用于在页面中组织子页面或子组件结构，适用于多层次导航的场景。例如，仪表盘页面可能包含多个子页面（如用户资料和设置）。

1.1 嵌套路由的基本概念

  • 父路由：定义一个页面的主结构。
  • 子路由：嵌套在父路由中的内容，通常通过占位符 <Outlet> 渲染。

1.2 示例：嵌套路由实现

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <Link to="profile">Profile</Link> | <Link to="settings">Settings</Link>
      </nav>
      <Outlet /> {/* 渲染子路由 */}
    </div>
  );
}

function Profile() {
  return <h2>Profile Page</h2>;
}

function Settings() {
  return <h2>Settings Page</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

示例说明：

  1. 父路由 path="dashboard" 定义了主页面的结构，并包含 <Outlet> 作为子路由的占位符。
  2. 子路由通过嵌套 <Route> 定义，与父路由关联。
  3. 导航链接使用 <Link>，可以实现子页面之间的跳转。

访问 /dashboard/profile 会显示 Profile Page，而访问 /dashboard/settings 会显示 Settings Page。

2. 路由守卫

路由守卫用于限制用户访问某些路由，根据用户状态（如登录状态或权限）决定是否允许访问目标页面。

2.1 路由守卫的实现

在 React Router 中，路由守卫通常通过逻辑判断和 Navigate 组件实现。如果用户不满足条件，可以将其重定向到其他页面。

示例：简单路由守卫

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

function Dashboard() {
  return <h1>Dashboard</h1>;
}

function App() {
  const isAuthenticated = false; // 模拟用户的认证状态

  return (
    <Router>
      <Routes>
        <Route
          path="/dashboard"
          element={isAuthenticated ? <Dashboard /> : <Navigate to="/" />}
        />
        <Route path="/" element={<h1>Home Page</h1>} />
      </Routes>
    </Router>
  );
}

export default App;

示例说明：

  1. isAuthenticated 模拟用户的认证状态。
  2. 如果用户未通过认证，则通过 Navigate 组件将用户重定向到主页。

访问 /dashboard 时，如果 isAuthenticated 为 false，会跳转到 /，显示 Home Page。

3. 结合嵌套路由与路由守卫

可以将路由守卫与嵌套路由结合使用，限制用户访问特定的子页面。

示例：嵌套路由与路由守卫结合

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 渲染子路由 */}
    </div>
  );
}

function Profile() {
  return <h2>Profile Page</h2>;
}

function Settings() {
  return <h2>Settings Page</h2>;
}

function ProtectedRoute({ isAuthenticated, children }) {
  return isAuthenticated ? children : <Navigate to="/" />;
}

function App() {
  const isAuthenticated = true; // 模拟用户认证状态

  return (
    <Router>
      <Routes>
        <Route
          path="dashboard"
          element={
            <ProtectedRoute isAuthenticated={isAuthenticated}>
              <Dashboard />
            </ProtectedRoute>
          }
        >
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
        <Route path="/" element={<h1>Home Page</h1>} />
      </Routes>
    </Router>
  );
}

export default App;

示例说明：

  1. ProtectedRoute 组件：
  • 用于包装受保护的路由。
  • 如果用户未通过认证，将重定向到 /。
  1. 父子路由结合守卫：
  • Dashboard 和其子页面受保护，只有认证用户才能访问。

访问 /dashboard 及其子页面时，未认证用户会被重定向到主页。

4. 小结

  • 嵌套路由：适合复杂页面结构，使用 <Outlet> 渲染子页面。
  • 路由守卫：控制访问权限，确保只有符合条件的用户才能访问特定路由。
  • 结合使用：可以在嵌套路由中添加守卫逻辑，进一步提升应用的安全性和灵活性。

通过灵活使用嵌套路由与路由守卫，可以构建层次分明且安全可靠的单页应用。

Last Updated::