React.js 中使用私有路由管理嵌套路由-js教程-PHP中文网

React.js 中使用私有路由管理嵌套路由

心靈之曲

发布： 2025-07-11 15:32:15

原创

402人浏览过

react.js 中使用私有路由管理嵌套路由

本文档旨在指导开发者如何在 React.js 应用中有效地管理嵌套路由，并结合私有路由实现用户认证后的页面访问控制。我们将通过示例代码，演示如何构建一个包含登录页面、受保护的仪表盘页面以及仪表盘内部的嵌套路由的完整流程。

实现嵌套路由和私有路由

在 React.js 应用中，嵌套路由允许你在一个布局组件内部渲染不同的子组件，而私有路由则用于控制哪些用户可以访问特定的路由。以下是一个实现嵌套路由和私有路由的示例：

1. 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 path="/" element={<ProtectedRoute />}>
          <Route path="/layout" element={<Layout />} />
          <Route path="/user" element={<Users />} />
          <Route path="/products" element={<Products />} />
        </Route>
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>
    </div>
  );
}

export default App;

登录后复制

在这个 App 组件中，我们使用了 react-router-dom 提供的 Routes 和 Route 组件来定义路由。

/ 路由对应 SignIn 组件，也就是登录页面。
/layout、/user 和 /products 路由被包裹在 ProtectedRoute 组件中，这意味着只有通过认证的用户才能访问这些路由。
ProtectedRoute 组件实际上是一个私有路由的实现，它会检查用户是否已登录，如果未登录则重定向到登录页面。
* 路由是一个通配符路由，用于处理所有未定义的路由，并将其重定向到登录页面。

2. Layout.jsx (布局组件)

import React from "react";
import { Col, Row } from "antd";
import { Link, Outlet } from "react-router-dom";

const Layout = () => {
  return (
    <>
      <Row>
        <Col xxl={4} xl={5} lg={6} md={6} sm={6} xs={6}>
          <div className="left-menu">
            <ul>
              <li>
                <Link to="/user">Users</Link>
              </li>
              <li>
                <Link to="/products">Products</Link>
              </li>
            </ul>
          </div>
        </Col>
        <Col xxl={20} xl={19} lg={18} md={18} sm={18} xs={18}>
          <Outlet />
        </Col>
      </Row>
    </>
  );
};

export default Layout;

登录后复制

Layout 组件定义了应用的整体布局，包括左侧菜单和内容区域。重要的是 <Outlet /> 组件，它用于渲染嵌套路由对应的组件。例如，当用户点击 "Users" 链接时，Users 组件将被渲染到 <Outlet /> 所在的位置。

3. SignIn.jsx (登录组件)

乾坤圈新媒体矩阵管家

新媒体账号、门店矩阵智能管理系统

查看详情

import React from "react";
import { useNavigate } from "react-router-dom";

const SignIn = () => {
  const navigate = useNavigate();
  const loginAuth = () => {
    // TODO: 实际项目中需要验证登录信息
    // 这里只是简单地模拟登录成功，并跳转到 layout 页面
    localStorage.setItem("isLoggedIn", "true"); // 模拟登录状态
    navigate("/layout");
  };
  return (
    <>
      <h2>Sign In</h2>
      <input type="text" placeholder="email" />
      <input type="password" placeholder="password" />
      <button onClick={loginAuth}>Login</button>
    </>
  );
};

export default SignIn;

登录后复制

SignIn 组件是一个简单的登录表单。当用户点击 "Login" 按钮时，loginAuth 函数会被调用。

useNavigate 钩子用于获取 navigate 函数，该函数用于编程式地导航到不同的路由。
loginAuth 函数模拟了登录过程。注意： 在实际项目中，你需要验证用户的登录信息，并根据验证结果来决定是否跳转到仪表盘页面。这里简单地使用 localStorage 模拟登录状态，实际项目中请替换为更安全的方案（例如使用 JWT）。

4. ProtectedRoute.jsx (私有路由组件)

import React from "react";
import { Navigate, Outlet } from "react-router-dom";

const ProtectedRoute = () => {
  const isLoggedIn = localStorage.getItem("isLoggedIn"); // 检查用户是否已登录

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

export default ProtectedRoute;

登录后复制

ProtectedRoute 组件是私有路由的核心。

它检查用户是否已登录（这里通过 localStorage 模拟）。
如果用户已登录，则渲染 <Outlet />，这意味着允许用户访问嵌套的路由。
如果用户未登录，则重定向到登录页面。

5. Users.jsx 和 Products.jsx (示例组件)

// Users.jsx
import React from "react";

const Users = () => {
  return (
    <div>
      <h2>Users Component</h2>
      {/* 用户列表内容 */}
    </div>
  );
};

export default Users;

// Products.jsx
import React from "react";

const Products = () => {
  return (
    <div>
      <h2>Products Component</h2>
      {/* 产品列表内容 */}
    </div>
  );
};

export default Products;

登录后复制

这两个组件是简单的示例组件，用于展示嵌套路由的效果。当用户访问 /user 路由时，Users 组件将被渲染；当用户访问 /products 路由时，Products 组件将被渲染。