React Router 5.x版本下如何为多个组件配置相同访问路径

React Router 5 原生支持同一路径匹配渲染多个组件，无需特殊第三方配置，有两种常用实现方案，你可以根据自己的业务场景选择：

方案1：同级并列声明同路径Route #

如果两个组件是平级渲染的关系，直接在同一层级声明两个相同path的Route即可，访问对应路径时两个组件会按你写的顺序依次渲染：

export default (
  <>
    <Route path="/" component={App} />
    <Route path="/" component={SearchFlow} />
  </>
);

如果你只希望在严格匹配根路径时同时渲染两个组件，给两个Route都加上exact属性即可。

方案2：嵌套路由渲染（适配布局容器场景） #

如果App是公共布局组件，需要将SearchFlow作为内容渲染在App内部，你的嵌套写法本身是正确的，只需要补充App组件内的children渲染逻辑即可，否则嵌套的子Route组件不会被渲染：

// App.tsx 补充渲染children的逻辑
import React from 'react';

const App: React.FC = (props) => {
  return (
    <div className="app-wrapper">
      {/* 你的公共布局代码，比如顶部导航、侧边栏等 */}
      <nav>公共导航</nav>
      {/* 必须加这行，嵌套的子Route对应组件才会渲染在这里 */}
      {props.children}
    </div>
  )
}
export default App;

路由配置可以保持你的原有写法，按需添加exact属性即可：

export default (
  <Route component={App}>
    <Route path="/" exact component={SearchFlow} />
  </Route>
);

注意：你示例代码里的SeachFlow为拼写错误，正确拼写为SearchFlow，请注意核对避免组件渲染异常。

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