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

Question

我具有以下组件结构：

我需要基于2条不同的路由从路由器中加载中的相应路由。

我使用的是："react-router-dom": "^5.1.2" ，并看到一些有关使用IndexRoute和props.children的文章，但无法从react-router-dom解析IndexRoute，似乎它已在版本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

从v4起，

IndexRoute实际上已从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>

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