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

时间:2019-12-23 14:23:13

标签: reactjs react-router

我具有以下组件结构:

enter image description here

我需要基于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中需要编辑一个项目,因此这次需要在

中加载

更新

更详细的结构:

enter image description here

1 个答案:

答案 0 :(得分: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