React.js中结合Private Route管理嵌套路由，解决组件重复渲染问题

你的问题出在嵌套路由的配置和渲染方式错误，导致子路由组件没有根据路径匹配来渲染，而是直接全部加载了。以下是具体修复步骤：

1. 修正路由结构，使用嵌套路由配置 #

在App.js中，将Users和Products路由作为Dashboard的子路由嵌套进去，确保路由层级正确：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// 导入你的组件：Login, Dashboard, Users, Products

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Login />} />
        {/* 嵌套子路由到Dashboard路由下 */}
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="users" element={<Users />} />
          <Route path="products" element={<Products />} />
        </Route>
      </Routes>
    </Router>
  );
}

2. 在Dashboard组件中使用Outlet渲染子路由内容 #

修改Dashboard组件，移除直接渲染Users和Products的代码，改用React Router提供的Outlet组件来承载匹配到的子路由组件：

import { Outlet, Link } from 'react-router-dom';

function Dashboard() {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', padding: '20px', background: '#f0f0f0' }}>
        {/* 使用相对路径跳转子路由 */}
        <Link to="users" style={{ display: 'block', marginBottom: '10px' }}>Users</Link>
        <Link to="products" style={{ display: 'block' }}>Products</Link>
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>
        {/* 这里只会渲染当前匹配的子路由组件 */}
        <Outlet />
      </main>
    </div>
  );
}

原理说明 #

• 嵌套路由通过将子路由包裹在父路由内部，实现路径的层级关联；
• Outlet组件是React Router中专门用来渲染子路由内容的占位符，只有当前路径匹配的子路由组件才会被渲染到这个位置，从而避免多个组件同时显示的问题。

内容的提问来源于stack exchange，提问作者Rohit Verma