使用React Router嵌套路由是否可行？是否符合最佳实践？

我有一个使用React Router v5的React应用（该问题同样适用于v4、v5、v6版本）。我想在App.js中定义如下路由：

<Router>
   <Route path='/main' component={Main}/>
   <Route path='/admin' component={Admin}/>
</Router>

随后在Main.js中定义另外两个路由：

const Main=()=> {
    
   return (
      <div className='some-special-styling-only-for-main'>
          <Route path='/dashboard' component={Dashboard}/>
          <Route path='/calculator' component={Calculator}/>
      </div>

   )
}

这种写法可以正常运行，但这样做是否存在问题？是否符合最佳实践？我注意到像react-location这类路由库不允许这种写法（必须在一处定义所有路由），且我在网上搜索数小时也未发现其他人采用这种方式。

回答 #

这种写法能正常运行，但存在明显缺陷，完全不符合React Router的最佳实践，具体问题和原因如下：

1. 路由逻辑分散，维护成本剧增 #

所有路由规则散落在不同组件文件中，后续修改路由、排查跳转异常时，需要在多个文件间来回查找，大型项目里很容易出现遗漏、冲突的情况，完全违背了路由结构"清晰可追溯"的设计原则。

2. 路径匹配逻辑混乱 #

你写的/dashboard和/calculator是绝对路径，和父组件对应的/main路径没有任何关联——这意味着直接在地址栏输入/dashboard就能渲染Dashboard组件，但此时Main组件不会被加载（因为/main路径未匹配），导致Main里的专属样式容器无法渲染，大概率会引发Dashboard的布局或样式异常。

3. 违背嵌套路由的设计初衷 #

React Router的嵌套路由核心是实现**"父路由匹配成功后，才渲染对应的子路由"**的关联逻辑。正确的嵌套写法应该使用相对路径，并借助父路由的承载机制：

• 在React Router v5中，你可以在App.js里通过嵌套Route的方式定义：

  <Router>
    <Route path='/main' component={Main}>
      {/* 子路由继承父路径，也可以写相对路径 './dashboard' */}
      <Route path='/main/dashboard' component={Dashboard}/>
      <Route path='/main/calculator' component={Calculator}/>
    </Route>
    <Route path='/admin' component={Admin}/>
  </Router>
  

  同时Main组件需要渲染props.children来承载子路由内容：

  const Main = (props) => {
    return (
      <div className='some-special-styling-only-for-main'>
        {props.children}
      </div>
    )
  }
  

• 到了v6版本，逻辑更清晰，用Outlet组件替代children：

  // App.jsx
  <Router>
    <Routes>
      <Route path='/main' element={<Main />}>
        <Route path='dashboard' element={<Dashboard />} />
        <Route path='calculator' element={<Calculator />} />
      </Route>
      <Route path='/admin' element={<Admin />} />
    </Routes>
  </Router>
  
  // Main.jsx
  import { Outlet } from 'react-router-dom';
  const Main = () => {
    return (
      <div className='some-special-styling-only-for-main'>
        <Outlet />
      </div>
    )
  }
  

4. 与主流路由库的设计理念冲突 #

像react-location这类库要求集中定义路由，本质是为了强化路由结构的可预测性和可维护性。React Router虽然没有强制禁止分散写法，但官方文档的示例全是集中式或规范嵌套写法，你搜不到其他人这么用，恰恰说明这种写法的弊端在实际项目中会被无限放大，属于典型的"能跑但没人用"的反模式。

总结：这种写法仅能实现基础功能，但会给后续维护埋下大量隐患，强烈建议改成规范的嵌套路由写法，要么集中定义路由结构，要么遵循父路由+相对路径的嵌套逻辑。

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