React Router路径渲染多组件问题及路由配置咨询

看起来你遇到了React Router路由匹配相关的问题，我来帮你梳理下常见的解决思路和可行方案：

一、意外触发多个路由渲染（路径匹配冲突） #

如果是某个路径下意外渲染了多个组件，大概率是路由的path匹配规则或定义顺序导致的。比如你提到的/dashboard/channels/:id/:channelName/collaborators和/dashboard/channels/:id/:channelName/:type就存在潜在冲突：当访问/dashboard/channels/123/test/collaborators时，collaborators会被:type当作动态参数匹配，加上两个路由都加了exact，就会同时触发渲染。

针对性解决方案： #

• 调整路由定义顺序：把固定字符串结尾的路由放在动态参数路由的前面，React Router会按顺序匹配，先匹配到的路由会优先渲染，不会再触发后面的匹配：

  // 先放固定路径的路由
  <Route exact path="/dashboard/channels/:id/:channelName/collaborators" render={(props) => <Collaborators {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
  // 再放动态参数的路由
  <Route exact path="/dashboard/channels/:id/:channelName/:type" render={(props) => <VideoStats {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
  

• 用正则限制动态参数范围：如果:type有明确的可选值（比如stats、videos），可以通过正则约束参数，避免和固定路径混淆：

  <Route exact path="/dashboard/channels/:id/:channelName/:type(stats|videos)" render={(props) => <VideoStats {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
  

二、主动需求：同一个路径下渲染多个组件 #

如果你的预期就是同一路径下同时渲染多个组件（比如侧边栏+主内容区），可以用这两种方式实现：

方案1：在单个Route的render中返回多组件容器 #

把需要渲染的组件包裹在React.Fragment或div中统一返回：

<Route exact path="/dashboard/main" render={() => (
  <>
    <Dashboard toggleModal={this.toggleModal} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu} />
    <SidebarComponent />
  </>
)} />

方案2：定义多个同路径的Route #

直接编写多个path相同的Route，React Router会渲染所有匹配成功的路由：

<Route exact path="/dashboard/main" render={() => <Dashboard toggleModal={this.toggleModal} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu} />} />
<Route exact path="/dashboard/main" render={() => <SidebarComponent />} />

额外优化：用Switch组件控制仅渲染第一个匹配路由 #

如果你希望不管有多少匹配的路由，只渲染第一个匹配项，可以把所有Route放在Switch组件内部，它会遍历子路由并停止在第一个匹配项上：

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

// ...

<Switch>
  <Route exact path="/dashboard/main" render={() => <Dashboard toggleModal={this.toggleModal} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu} />} />
  <Route exact path="/dashboard/channels/:id/:channelName/collaborators" render={(props) => <Collaborators {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
  <Route exact path="/dashboard/channels/:id/:channelName/:type" render={(props) => <VideoStats {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
</Switch>

如果以上方案还没解决你的问题，可以补充下具体场景：比如是哪个路径出现了异常多组件渲染，你的预期行为是什么，我再帮你细化方案~

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