react-router-dom v4中的多个嵌套路由

小编典典

react-router-dom v4中的多个嵌套路由

reactjs

我在react-router-dom中需要多个嵌套路由

我正在使用v4的react-router-dom

我有我的

import { BrowserRouter as Router, Route } from 'react-router-dom';

我需要像这样渲染的组件

--- Login
--- Home
    --- Page 1
    --- Page 2
    --- Page 3
--- About
--- etc

Home组件包含一个Page1，Page2和Page3组件共有的Header组件，但在Login和About中不存在。

我的js代码看起来像这样

<Router>
    <div>
        <Route path='/login' component={Login} />
        <Home>
            <Route path='/page1' component={Page1} />
            <Route path='/page2' component={Page2} />
            <Route path='/page3' component={Page3} />
        </Home>
        <Route path='/about' component={About} />
    </div>
</Router>

我希望Login组件仅在/ login上显示当我请求/ page1，/ page2，/ page3时，它们应该分别包含Home组件和该页面的内容。

我得到的是呈现的Login组件，然后呈现了Page1的组件。

我很确定自己在某个地方漏掉了一些琐碎的小错误或犯了一个非常愚蠢的错误，因此我将不胜感激。在过去的两天里，我一直坚持这一点。

阅读 709

2020-07-22

共1个答案

小编典典

在路由器v4中使用交换机组件

<Router>
<Switch>
  <Route path='/login' component={Login} />
  <Route path='/about' component={About} />
  <Home>
    <Route component={({ match }) =>
      <div>
        <Route path='/page1' component={Page1} />
        <Route path='/page2' component={Page2} />
        <Route path='/page3' component={Page3} />
      </div>
    }/>
  </Home>
</Switch>



export default class Home extends Component {
render() {
    return (
      <div className="Home">
          { this.props.children }
      </div>
    )
  }
}

我认为这段代码显示了使用组件的基本思想。

2020-07-22