使用React Routes配置多页面时为何打开首页所有页面同时加载？

存在的问题 #

• 路由配置语法错误：React Router v6的Route组件element属性要求传入JSX元素，你当前直接写element={Dashboard}属于直接传入组件构造函数，会导致组件在路由解析阶段就被直接执行，和路径匹配逻辑脱钩，这就是你非/dashboard路径下Dashboard的console.log也触发的核心原因。
• 跳转逻辑错误：使用window.location.pathname修改路由会触发整页刷新，不走React Router的客户端路由逻辑，不仅会重置所有组件状态，也无法触发路由的路径匹配更新。
• 路径拼写错误：侧边栏配置的link字段值为/dashboad，少了字母r，和路由配置的/dashboard不匹配，就算跳转逻辑正确也无法跳转到目标页面。
• 路由层级不合理：你把Router放在SideBar内部，意味着只有侧边栏内部的组件能感知路由变化，后续如果要在侧边栏外渲染路由页面会完全失效。

修复步骤 #

1. 修正路由配置和层级

首先调整App组件的路由结构，把Router提至外层，修正element属性的写法：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Dashboard from './Dashboard'
import SideBar from './SideBar'

function App() {
  return (
    <div className="content">
      <Router>
        <SideBar />
        {/* 路由页面渲染放在侧边栏外，避免被侧边栏样式限制 */}
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
          {/* 后续可添加其他路由，比如首页 */}
          <Route path="/" element={<div>首页内容</div>} />
        </Routes>
      </Router>
    </div>
  );
}
export default App;

2. 修正侧边栏跳转逻辑

不要用window.location，改用React Router提供的useNavigate钩子实现客户端跳转：

// SideBar.js顶部导入钩子
import { useNavigate } from 'react-router-dom'
import { List, ListItemButton } from '@mui/material'
import { BarData } from './你的配置文件路径'

function SideBar() {
  const navigate = useNavigate()
  return (
    <List>
      {BarData.map((item, key) => {
        return (
          <ListItemButton
            key={key}
            onClick={() => {
              navigate(item.link) // 用navigate实现无刷新客户端跳转
            }}
          >
            {/* 列表项原有内容：图标、文字等 */}
          </ListItemButton>
        )
      })}
    </List>
  )
}

3. 修正配置文件的路径拼写

把BarData里的link改成正确的路径：

export const BarData = [
  {
    text: "Dashboard",
    icon: <HomeRounded color="#637381" />,
    link: "/dashboard", // 修正拼写错误
  },
  // 其他菜单项
]

4. 实现路由懒加载（解决首页加载所有页面的问题）

如果想避免首页打包所有页面代码，按需加载对应路由页面，可以用React的懒加载API：

// App.js里修改导入方式
import { lazy, Suspense } from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import SideBar from './SideBar'
// 懒加载Dashboard组件，只有访问对应路径时才会拉取代码
const Dashboard = lazy(() => import('./Dashboard'))

function App() {
  return (
    <div className="content">
      <Router>
        <SideBar />
        {/* 懒加载组件需要包裹Suspense，fallback是加载时的占位内容 */}
        <Suspense fallback={<div>加载中...</div>}>
          <Routes>
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/" element={<div>首页内容</div>} />
          </Routes>
        </Suspense>
      </Router>
    </div>
  );
}

修改后Dashboard的代码只会在用户访问/dashboard路径时才会加载，不会在首页加载时就执行。

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