Question

我有2个组件，我想要在一些路由中使用一个组件，在其余路由中使用其他组件。

在这两个组件中，我在两个组件中使用{props.children}来嵌套路由。

我的代码是：

<Router history={history}>
  <div className='routeContainer'>
    <Switch>

      <Component1>
        <Route exact path='/' component={Dashboard} />
        <Route exact path='/abc' component={ComponentAbc} />
      </Component1>

      <Component2>
        <Route exact path='/def' component={ComponentDEF} />
        <Route exact path='/xyz' component={ComponentXYZ} />
      </Component2>
    </Switch>
  </div>
</Router>

在Component1和Component 2中我正在使用{this.props.children} 如下：

render () {
 return (
  <div>

      <SideBar />
      <Header />
      {this.props.children} 
  </div>
 )
}

这不起作用，请帮助使这个结构有效。

Answer 1

＆＃34; <Switch>的所有孩子都应该是<Route>或<Redirect>元素。只会呈现匹配当前位置的第一个孩子。＆＃34; - react-router

如果您想要路线组件的父级，您可以执行以下操作之一：

包裹内部组件
包裹 RouteProps - 组件

无论哪种方式，您都需要移除<Routes/>内的<Redirects/>或<Switch>内的所有内容

备选 2 ：

<Route exact path='/' component={()=> (
  <Component1>
    <Dashboard />
  </Component1>  
)} />

REACT ROUTER DOM中的嵌套路由，在路由器中包装组件

1 个答案: