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

Question

我有这个组件结构：

我需要基于 2 个不同的路由在 内部加载来自 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中需要编辑一个项目，所以这次需要在里面加载

更新

更详细的结构：

Answer 1

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

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

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

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

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

此外，如果您使用的是最新版本的 React Router (5.1.0)，您可以使用 children 属性来渲染路由，而不是使用渲染属性

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

更新

鉴于您的更新

一开始是在里面加载的 （硬编码），

但是从 ProjectsList 需要编辑一个项目，所以需要 这次在

中加载

您可以在您的 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>

但在这种情况下，您必须在您的 HomePage 组件中渲染 children