React中BrowserRouter配合Switch配置路由数组为何所有路由同时加载？

• 组件提前执行渲染：路由数组定义阶段，你对所有组件渲染函数直接添加()执行（如renderHome()、issueSubmissionModal()），相当于初始化路由数组时就已经生成了所有组件的JSX实例，这一过程和Route是否匹配完全无关，Switch自然无法控制未匹配路由的渲染，是导致所有路由同时出现的核心原因。
• 版本兼容问题（次要可能性）：如果修改后问题仍存在，检查react-router-dom版本，v6版本已废弃Switch组件，替换为Routes组件，新旧API不兼容也会导致匹配逻辑失效。

基础修复（适配现有写法） #

1. 修改路由数组定义，存储函数引用而非执行结果 #

删除路由配置中所有渲染函数后的执行括号，仅存储函数引用，等待路由匹配后再执行：

const issueSubmissionModal = () => IssueModal({ isVisible: true })
const renderHeader = () => <AppHeader userData={userData}><AppNavbar/></AppHeader>
const renderHome = () => <AppTemplate userData={userData} />

const Routes = userData ? [
        {
            key: "home",
            path: "/",
            component: renderHome,
            includeProfile:  null,
            includeAppheader: renderHeader
        },
        {
            key: "issueSubmission",
            path: "/issueSubmission",
            component: issueSubmissionModal,
            includeProfile: renderHome,
            includeAppheader: renderHeader
        },
    ] : []

2. 调整路由渲染逻辑，匹配后再执行渲染 #

const renderRoutes = () => <Switch>
  {Routes.map(route => (
    <Route exact path={route.path} key={route.key}>
      {route.includeAppheader && route.includeAppheader()}
      {route.includeProfile && route.includeProfile()}
      {route.component()}
    </Route>
  ))}
</Switch>

return renderRoutes();

拓展优化（适配多路由场景） #

路由数量较多时可以封装统一的路由渲染逻辑，减少重复代码，同时支持后续扩展路由参数、权限校验等能力：

// 封装通用路由渲染容器
const RouteWrapper = ({ route, userData }) => {
  return (
    <>
      {route.includeAppheader?.(userData)}
      {route.includeProfile?.(userData)}
      <route.component userData={userData} />
    </>
  )
}

// 路由渲染逻辑简化为
const renderRoutes = () => <Switch>
  {Routes.map(route => (
    <Route 
      exact 
      path={route.path} 
      key={route.key} 
      render={(props) => <RouteWrapper {...props} route={route} userData={userData} />} 
    />
  ))}
</Switch>

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