小编Adi*_*ade的帖子

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

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

我有我的

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

我需要像这样渲染组件

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

Home组件包含一个Header组件,该组件对于Page1,Page2和Page3组件是通用的,但在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的组件.

我很确定我错过了一些非常微不足道的事情,或者在某个地方犯了一个非常愚蠢的错误,并且非常感谢我能得到的所有帮助.过去两天我一直坚持这个.