reactjs - 在另一个组件内部渲染的反应路线

Question

我有这个组件结构：

我需要基于 2 个不同的路由在 <OtherComponent> 中加载来自 Router 的相应路由。

我使用: "react-router-dom": "^5.1.2" ，看到一些帖子谈论使用 IndexRoute 和 props.children，但 IndexRoute 无法从 react-router-dom 解决，似乎在版本 5 中已删除。

我的路由器（BrowserRouter）如下所示：

<Router basename={process.env.REACT_APP_ROUTER_BASE || '/MyApp'}>
                <Switch>
                    <Route path="/" exact component={HomePage} />
                    {/*<IndexRoute component={ProjectsList} /> // The component to send to HomePage's `props.children` when route is '/'*/}
                    <Route path="/login" component={Login} />
                    <Route path="/editProject" component={ProjectEditor} />
                    {/*<Redirect path="*" to="/" />*/}
                </Switch>
            </Router>

一开始 <ProjectsList> 被加载到 <HomePage> 里面（硬编码），

但是从ProjectsList中需要编辑一个项目，所以这次需要在<HomePage>里面加载<ProjectEditor>

更新

更详细的结构：

标签： reactjsreact-router

Answer 1

IndexRoute从 v4 开始，确实已从 React-Router 中删除。它被用作某种“默认路线”

路由现在是常规组件，并且可以作为任何组件的一部分呈现，只要某些顶级组件具有路由器定义。嵌套路由允许您使用该结构组合路由和渲染组件。

路由也有一个渲染函数，你可以在其中渲染任何组件

如果需要渲染ProjectsList为 HomePage 的子项，为什么不将其作为子项传递呢？

<Route path="/" exact render={() => <HomePage><ProjectsList /></HomePage>} />

此外，如果你使用的是最新版本的 React Router (5.1.0)，你可以使用childrenprops 来渲染路由，而不是使用 render prop

<Route path="/" exact>
  <HomePage><ProjectsList /></HomePage>
</Route>

更新

鉴于您的更新

一开始 <ProjectsList> 被加载到 <HomePage> 里面（硬编码），

但是从ProjectsList中需要编辑一个项目，所以这次需要在<HomePage>里面加载<ProjectEditor>

您可以在您的HomePage组件上，在您的渲染中定义两条路线

return (
  <Switch>
    <Route path="/editProject"><ProjectsList /></Route>
    <Route path="/"><ProjectsList /></Route>
   </Switch>
)

（根据版本，您可能必须render={() => ...}改用

如果出于某种原因，您希望将所有路由放在同一个文件中，您也可以在路由定义中执行此操作。

<Route path="/" exact>
  <HomePage>
    <Switch>
      <Route path="/editProject"><ProjectsList /></Route>
      <Route path="/"><ProjectsList /></Route>
    </Switch>
  </HomePage>
</Route>

但在这种情况下，你将不得不children在你的HomePage组件中渲染