React Router v6：管理私有路由与嵌套视图的实践

// App.jsx
import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import SignIn from './auth/SignIn'; // 登录组件
import Layout from './components/Layout'; // 仪表盘布局组件
import Users from './components/Users'; // 用户列表组件
import Products from './components/Products'; // 产品列表组件
import ProtectedRoute from './auth/ProtectedRoute'; // 私有路由守卫

function App() {
  return (
    <div className="App">
      <Routes>
        {/* 公开路由：登录页面 */}
        <Route path="/" element={<SignIn />} />

        {/* 保护的路由组：所有需要登录才能访问的路由都放在这里 */}
        <Route element={<ProtectedRoute />}>
          {/* 仪表盘父级布局路由 */}
          {/* 当访问 /dashboard 时，Layout 组件会被渲染 */}
          <Route path="/dashboard" element={<Layout />}>
            {/* 嵌套子路由：当访问 /dashboard/users 时，Users 组件会在 Layout 的 Outlet 中渲染 */}
            <Route path="users" element={<Users />} />
            {/* 嵌套子路由：当访问 /dashboard/products 时，Products 组件会在 Layout 的 Outlet 中渲染 */}
            <Route path="products" element={<Products />} />
            {/* 默认子路由：当只访问 /dashboard 时，默认重定向到 /dashboard/users */}
            <Route index element={<Navigate to="users" replace />} />
          </Route>
        </Route>

        {/* 匹配所有未定义路由，重定向到登录页 */}
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </div>
  );
}

export default App;

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

const ProtectedRoute = () => {
  // 在实际应用中，这里需要实现真正的认证逻辑
  // 例如，从 localStorage 获取 token，或检查 Redux/Context 中的用户状态
  const isAuthenticated = true; // 示例：假设用户已认证

  return isAuthenticated ? <Outlet /> : <Navigate to="/" replace />;
};

export default ProtectedRoute;

// 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 (
    <Row style={{ minHeight: '100vh' }}>
      {/* 左侧菜单栏 */}
      <Col xxl={4} xl={5} lg={6} md={6} sm={6} xs={6} style={{ borderRight: '1px solid #f0f0f0' }}>
        <div className="left-menu" style={{ padding: '20px' }}>
          <h2>Dashboard</h2>
          <ul>
            <li style={{ marginBottom: '10px' }}>
              {/* 链接到嵌套子路由 */}
              <Link to="/dashboard/users" style={{ textDecoration: 'none', color: '#1890ff' }}>Users</Link>
            </li>
            <li>
              {/* 链接到嵌套子路由 */}
              <Link to="/dashboard/products" style={{ textDecoration: 'none', color: '#1890ff' }}>Products</Link>
            </li>
          </ul>
        </div>
      </Col>
      {/* 右侧内容区域 */}
      <Col xxl={20} xl={19} lg={18} md={18} sm={18} xs={18} style={{ padding: '20px' }}>
        <div className="content-area">
          <Outlet /> {/* ！！！关键：这里会渲染当前激活的子路由组件（Users 或 Products） */}
        </div>
      </Col>
    </Row>
  );
};

export default Layout;

// auth/SignIn.jsx
import React from "react";
import { useNavigate } from "react-router-dom";

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

  const loginAuth = () => {
    // 实际的登录认证逻辑，例如调用API验证用户名密码
    // 假设认证成功
    console.log("Attempting login...");
    // 登录成功后，导航到仪表盘的默认页面
    navigate("/dashboard");
  };

  return (
    <div style={{ padding: '50px', textAlign: 'center' }}>
      <h2>Sign In</h2>
      <input type="text" placeholder="email" style={{ margin: '10px', padding: '8px' }} />
      <br />
      <input type="password" placeholder="password" style={{ margin: '10px', padding: '8px' }} />
      <br />
      <button onClick={loginAuth} style={{ padding: '10px 20px', cursor: 'pointer' }}>Login</button>
    </div>
  );
};

export default SignIn;

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

const Users = () => {
  return (
    <div>
      <h3>Users List</h3>
      <p>This is the content for the Users section.</p>
      {/* 实际的用户列表数据和UI */}
    </div>
  );
};

export default Users;

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

const Products = () => {
  return (
    <div>
      <h3>Products Catalog</h3>
      <p>This is the content for the Products section.</p>
      {/* 实际的产品目录数据和UI */}
    </div>
  );
};

export default Products;