多项目React应用中子项目如何排除父路由避免404重复渲染

以下两种实现方式可根据你使用的React Router版本选择，均仅需在子项目侧修改即可生效：

方案1：自定义404渲染判断（兼容性最优，所有React Router版本通用） #

不要直接将404组件绑定到path="*"的路由，在渲染前先判断当前访问路径是否属于父项目路由列表，属于则返回空，否则渲染404组件即可。

React Router v6 示例代码 #

import { useLocation, Routes, Route } from 'react-router-dom'
import NotFoundPage from './NotFoundPage'
import ChildRouteOneComponent from './ChildRouteOne'
import ChildRouteTwoComponent from './ChildRouteTwo'

function ChildRouter({ parentProjectRoutes }) {
  const location = useLocation()
  // 判断当前路径是否为父项目路由
  const isParentRoute = parentProjectRoutes.includes(location.pathname)
  // 若父项目存在嵌套通配符路由（如/route1/*），可替换为前缀匹配逻辑：
  // const isParentRoute = parentProjectRoutes.some(route => location.pathname.startsWith(route.replace('/*', '')))

  return (
    <Routes>
      <Route path="/child-route-1" element={<ChildRouteOneComponent />} />
      <Route path="/child-route-2" element={<ChildRouteTwoComponent />} />
      {/* 仅非父项目路由时渲染404 */}
      <Route path="*" element={isParentRoute ? null : <NotFoundPage />} />
    </Routes>
  )
}

React Router v5 示例代码 #

import { useLocation, Switch, Route } from 'react-router-dom'

function ChildRouter({ parentProjectRoutes }) {
  const location = useLocation()
  const isParentRoute = parentProjectRoutes.includes(location.pathname)

  return (
    <Switch>
      <Route path="/child-route-1" component={ChildRouteOneComponent} />
      <Route path="/child-route-2" component={ChildRouteTwoComponent} />
      <Route path="*" render={() => isParentRoute ? null : <NotFoundPage />} />
    </Switch>
  )
}

该方案逻辑简单清晰，后续父项目路由更新仅需同步parentProjectRoutes数组即可，无需修改匹配规则。

方案2：正则路由排除父路径（适合路由规则固定的场景） #

React Router的path参数支持正则匹配，你可以将父项目路由列表拼接为排除正则，直接配置到404路由的path属性，命中父路由的路径将不会匹配到404路由。

// 父项目路由转为排除正则，示例父路由['/route1','/route2']生成正则为 /^(?!\/route1|\/route2).*$/
const excludeReg = new RegExp(`^(?!${parentProjectRoutes.map(r => r.replace(/\//g, '\\/')).join('|')}).*$`)

function ChildRouter() {
  return (
    <Routes>
      <Route path="/child-route-1" element={<ChildRouteOneComponent />} />
      <Route path="/child-route-2" element={<ChildRouteTwoComponent />} />
      {/* 仅不匹配父路由的路径命中404 */}
      <Route path={excludeReg} element={<NotFoundPage />} />
    </Routes>
  )
}

注意如果父项目存在动态路由或通配符路由，需要对应调整正则规则，兼容性弱于方案1。

额外优化建议 #

如果后续子项目路由可统一增加前缀（如全部以/child/开头），可以直接给子项目所有路由套一层带前缀的父路由，404仅在该前缀范围内生效，完全不会和父项目路由冲突：

<Routes>
  <Route path="/child/*">
    <Route path="route-1" element={<ChildRouteOneComponent />} />
    <Route path="route-2" element={<ChildRouteTwoComponent />} />
    <Route path="*" element={<NotFoundPage />} />
  </Route>
</Routes>

内容的提问来源于stack exchange，提问作者Sai Yerni Akhil