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

Question

我需要在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的组件.

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

Answer 1

使用从props this.props.match.path获取的url/path匹配来获取设置为组件的路径.

定义您的主要路线如下

<Router>
  <div>
    <Route exact path="/" component={DummyIndex} /> {/* Note-1 */}
    <Route path="/login" component={Login} />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/etc" component={Etc} />
  </div>
</Router>

然后在HomeComponent中定义您的路线

class Home extends Component {
  render() {
    return <div>
      <Route exact path={this.props.match.path} component={HomeDefault} />
      <Route path={`${this.props.match.path}/one`} component={HomePageOne} />
      <Route path={`${this.props.match.path}/two`} component={HomePageTwo} />
    </div>
  }
}

定义的路线如下

• /登录
• /家
• /家/个
• /家/两
• /关于
• /等等

如果您想窝路线进一步HomePageOne一样的/ home /一个/和/家用/一个/ B,您可以继续相同的方法.

注意1:如果您不想进一步嵌套,只需使用prop设置路径exact.

编辑(2017年5月15日)

最初,我已经使用过props.match.url,现在我把它改成了props.match.path.

我们可以使用props.match.path而不是props.match.url在Route的路径中,这样如果你在顶级路由中使用路径参数,你可以通过内部(嵌套)路径获取它props.match.params.

如果你没有任何路径参考,props.match.url就足够了

Answer 2

在路由器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>
    )
  }
}

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

Answer 3

本周我遇到了同样的问题，我认为该项目已经过去了一段时间，因为所有文档、示例和视频都是针对以前版本的，而版本 4 的文档令人困惑
这就是我完成工作的方式，让我知道这是否有帮助

import React, { Component } from 'react';

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

import Root from './Root';
import Home from './Home';
import About from './About';

import './App.css';

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Root>
                       <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/home" component={Home} />
                            <Route path="/about" component={About} />
                        </Switch>
                    </Root>
                </div>
            </BrowserRouter>
        );
    }
}

export default App;