大佬教程收集整理的这篇文章主要介绍了如何在React Router v4中嵌套路由?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
到目前为止,我发现的最佳模式。
// main app
<div>
// not setTing a path prop, makes this always render
<Route component={AppSHell}/>
<Switch>
<Route exact path="/" component={Login}/>
<Route path="/dashboard" component={Asyncdashboard(userAgent)}/>
<Route component={NoMatch}/>
</Switch>
</div>
我可以继续将其嵌套在组件中,并且一切都很好,包括hmr(如果使用webpack,请不要忘记设置output.publicPath
为"/"
)
// dashboard component
<div>
// the same way as before, not setTing a path prop
// makes it render on every /dashboard/** request
<Route component={DashboardTAB}/>
<Switch>
// longer path (with same root) than others first
<Route path="/dashboard/graphs/longerpath" component={GraphForm}/>
<Route path="/dashboard/graphs" component={Graphs}/>
<Route path="/dashboard/workers" component={List}/>
<Route path="/dashboard/insert" component={InsertComponent}/>
</Switch>
</div>
有没有办法在React Router v4中嵌套路由?
这有效:
<Router basename='/app'>
<main>
<Route path='/' component={AppBar} />
<Route path='/customers' component={Customers} />
</main>
</Router>
这不是:
<Router basename='/app'>
<Route path='/' component={AppBar}>
<Route path='/customers' component={Customers} />
</Route>
</Router>
客户组成部分:
import React,{ Component,PropTypes } from 'react'
import styled from 'styled-components'
export default class Customers extends Component {
render () {
return (
<Container>
<h1>Customers</h1>
</Container>
)
}
}
const container = styled.section`
height: 100%;
padding: 15px;
overflow: auto;
`
以上是大佬教程为你收集整理的如何在React Router v4中嵌套路由?全部内容,希望文章能够帮你解决如何在React Router v4中嵌套路由?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。