React Router v6 中嵌套路由与保护路由的实现指南

// App.jsx
import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import SignIn from './components/SignIn';
import Layout from './components/Layout';
import Users from './components/Users';
import Products from './components/Products';
import WelcomeDashboard from './components/WelcomeDashboard'; // 仪表盘默认内容
import ProtectedRoute from './components/ProtectedRoute'; // 保护路由组件

function App() {
  return (
    <div className="App">
      <Routes>
        {/* 登录页 */}
        <Route path="/" element={<SignIn />} />

        {/* 保护路由：所有仪表盘相关页面都应在 ProtectedRoute 内部 */}
        <Route element={<ProtectedRoute />}>
          {/* 仪表盘布局路由：它将包含嵌套路由 */}
          <Route path="/dashboard" element={<Layout />}>
            {/* 仪表盘的默认内容，当访问 /dashboard 时显示 */}
            <Route index element={<WelcomeDashboard />} />
            {/* 嵌套在 /dashboard 下的用户管理页面 */}
            <Route path="users" element={<Users />} />
            {/* 嵌套在 /dashboard 下的产品管理页面 */}
            <Route path="products" element={<Products />} />
          </Route>
        </Route>

        {/* 404 页面或重定向到首页 */}
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </div>
  );
}

export default App;

// components/Layout.jsx
import React from "react";
import { Col, Row } from "antd"; // 假设使用 Ant Design 进行布局
import { Link, Outlet } from "react-router-dom"; // 引入 Outlet

const Layout = () => {
  return (
    <div className="dashboard-layout">
      <Row>
        {/* 左侧菜单栏 */}
        <Col xxl={4} xl={5} lg={6} md={6} sm={6} xs={6}>
          <div className="left-menu">
            <ul>
              <li>
                {/* 使用相对路径导航到 /dashboard/users */}
                <Link to="users">Users</Link>
              </li>
              <li>
                {/* 使用相对路径导航到 /dashboard/products */}
                <Link to="products">Products</Link>
              </li>
              <li>
                {/* 返回仪表盘首页，使用相对路径导航到 /dashboard */}
                <Link to="/dashboard">Dashboard Home</Link>
              </li>
            </ul>
          </div>
        </Col>
        {/* 右侧主内容区域，由 Outlet 渲染子路由内容 */}
        <Col xxl={20} xl={19} lg={18} md={18} sm={18} xs={18}>
          <div className="main-content">
            <Outlet /> {/* 核心：子路由组件将在这里渲染 */}
          </div>
        </Col>
      </Row>
    </div>
  );
};

export default Layout;

// components/ProtectedRoute.jsx
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const ProtectedRoute = () => {
  // 模拟登录状态，实际应用中会从全局状态或认证服务获取
  const isAuthenticated = localStorage.getItem('isLoggedIn') === 'true';

  if (!isAuthenticated) {
    // 如果未登录，重定向到登录页
    return <Navigate to="/" replace />;
  }

  // 如果已登录，渲染子路由（即 App.jsx 中 ProtectedRoute 下的 Route 元素）
  return <Outlet />;
};

export default ProtectedRoute;

// components/SignIn.jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

const SignIn = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 模拟登录成功，设置登录状态
    localStorage.setItem('isLoggedIn', 'true');
    // 导航到仪表盘页面
    navigate('/dashboard');
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>登录</h2>
      <input type="text" placeholder="邮箱" style={{ margin: '5px', padding: '8px' }} />
      <br />
      <input type="password" placeholder="密码" style={{ margin: '5px', padding: '8px' }} />
      <br />
      <button onClick={handleLogin} style={{ margin: '10px', padding: '10px 20px', cursor: 'pointer' }}>
        登录
      </button>
    </div>
  );
};

export default SignIn;

// components/Users.jsx
import React from 'react';

const Users = () => {
  return (
    <div style={{ padding: '20px' }}>
      <h3>用户管理页面</h3>
      <p>这里显示用户列表和相关操作。</p>
    </div>
  );
};

export default Users;

// components/Products.jsx
import React from 'react';

const Products = () => {
  return (
    <div style={{ padding: '20px' }}>
      <h3>产品管理页面</h3>
      <p>这里显示产品列表和相关操作。</p>
    </div>
  );
};

export default Products;

// components/WelcomeDashboard.jsx
import React from 'react';

const WelcomeDashboard = () => {
  return (
    <div style={{ padding: '20px' }}>
      <h3>欢迎来到仪表盘！</h3>
      <p>请从左侧菜单选择一个选项。</p>
    </div>
  );
};

export default WelcomeDashboard;