react-router-dom v4中的多个嵌套路由 [英] Multiple Nested Routes in react-router-dom v4

问题描述

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

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

我有我的

  import {BrowserRouter作为路由器，路由}来自'react-router-dom'; 
  

我需要像这样渲染组件

  ---登录
 ---首页
 --- Page 1 
 --- Page 2 
 ---页面3 
 ---关于
 ---等等
  

Home组件包含一个Header组件，它与Page1，Page2和Page3组件相同，但在Login和About中不存在。

我的js代码如下所示

 <路由器> 
< 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
当我请求/ page1时，/ page2，/ page3，它们应分别包含Home组件和该页面的内容。

我得到的是Login组件，而下方是Page1的组件被渲染。

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

解决方案

使用从道具<$ c获得的网址/路径匹配$ c> this.props.match.path 获取设置为组件的路径。

定义主路由如下

 <路由器> 
< div> 
< Route exact path =/component = {DummyIndex} /> {/ * Note-1 * /} 
< Route path =/ logincomponent = {Login} /> 
< Route path =/ homecomponent = {Home} /> 
< Route path =/ aboutcomponent = {About} /> 
< Route path =/ etccomponent = {Etc} /> 
< / div> 
< / Router> 
  

然后在 Home 组件中，定义您的路线

  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> 
} 
} 
  

定义的路线如下

• / login


• / home


• / home / one


• / home / two


• / about


• / etc

如果你想在 HomePageOne 中进一步嵌套路线，比如 / home / one / a 和 / home / one / b ，您可以采用相同的方法。

注意1：如果您不想进一步嵌套，只需设置路径为prop exact 。 / p>

编辑（2017年5月15日）

最初，我用过 props.match.url 现在我将其更改为 props.match.path 。

我们可以在Route's中使用 props.match.path 而不是 props.match.url 路径，这样如果你在顶级路线中使用路径参数，你可以通过 props.match.params 在内部（嵌套）路线中获取它。

如果你没有任何路径参数， props.match.url 就够了

I need multiple nested routes in react-router-dom

I am using v4 of react-router-dom

I've got my

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

and I need the components to render like so

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

The Home component contains a Header component that is common to Page1, Page2, and, Page3 components, but is not present in Login and About.

My js code reads like so

<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>

I expect the Login component to show only on /login When I request for /page1, /page2, /page3, they should contain the Home component and that page's content respectively.

What I get instead is the Login component rendered and below that Page1's component is rendered.

I'm pretty sure that I'm missing something very trivial or making a really silly mistake somewhere, and would appreciate all the help I could get. I've been stuck with this for the last two days.

解决方案

Use the url/path match obtained from props this.props.match.path to get the path that is set to a component.

Define your main routes as below

<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>

Then in Home Component, define your routes

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>
  }
}

The defined routes are as below

• /login
• /home
• /home/one
• /home/two
• /about
• /etc

If you want to nest routes further in HomePageOne like /home/one/a and /home/one/b, you can proceed the same approach.

Note-1: If you don't want further nesting, just set the route with prop exact.

EDIT (May 15, 2017)

Initially, I've used props.match.url and now I changed it to props.match.path.

We can use props.match.path instead of props.match.url in Route's path so that if you use path params in top level routes, you can get it in inner (nested) routes via props.match.params.

If you don't you any path params, props.match.url is enough

这篇关于react-router-dom v4中的多个嵌套路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！