javascript – react-router-dom v4中的多个嵌套路由
作者:互联网
我需要在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的组件.
我很确定我错过了一些非常微不足道的事情,或者在某个地方犯了一个非常愚蠢的错误,并且会感谢我能得到的所有帮助.过去两天我一直坚持这个.
解决方法:
使用从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>
然后在Home Component中定义您的路线
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>
}
}
定义的路线如下
> /登录
> / home
> / home / one
> / home / two
> / about
> /等
如果你想在HomePageOne中进一步嵌套路径,如/ home / one / a和/ home / one / b,你可以采用相同的方法.
注意1:如果您不想进一步嵌套,只需使用prop exact设置路径.
编辑(2017年5月15日)
最初,我使用了props.match.url,现在我将其更改为props.match.path.
我们可以在Route的路径中使用props.match.path而不是props.match.url,这样如果在顶级路由中使用路径参数,则可以通过props.match.params在内部(嵌套)路径中获取它.
如果你没有任何路径参数,props.match.url就足够了
标签:react-router-dom,javascript,reactjs,react-router 来源: https://codeday.me/bug/20190926/1821026.html