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

问题描述

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

我使用的是 react-router-dom 的 v4

我有我的

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

我需要组件像这样渲染

--- 登录- - 家--- 第 1 页- - 第2页--- 第 3 页- - 关于- - 等等

Home 组件包含一个 Header 组件，它对于 Page1、Page2 和 Page3 组件是通用的，但在 Login 和 About 中不存在.

我的js代码是这样的

<路由器><div><Route path='/login' component={Login}/><主页><Route path='/page1' component={Page1}/><Route path='/page2' component={Page2}/><Route path='/page3' component={Page3}/></主页><Route path='/about' component={About}/>

</路由器>

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

我得到的是呈现的登录组件，并在页面 1 的组件下方呈现.

我很确定我遗漏了一些非常微不足道的东西或在某处犯了一个非常愚蠢的错误，并且非常感谢我能得到的所有帮助.过去两天我一直被这个问题困扰.

解决方案

在路由器 v4 中使用 Switch 组件

<路由器><开关><Route path='/login' component={Login}/><Route path='/about' component={About}/><主页><路由组件={({匹配})=><div><Route path='/page1' component={Page1}/><Route path='/page2' component={Page2}/><Route path='/page3' component={Page3}/>

}/></主页></开关>

export default class Home extends Component {使成为() {返回 (<div className="首页">{ this.props.children }

)}}

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

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 Switch component in router 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>
    )
  }
}

I think this code shows the basic idea of using component.

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