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