程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何在React Router v4中嵌套路由?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决如何在React Router v4中嵌套路由??

开发过程中遇到如何在React Router v4中嵌套路由?的问题如何解决?下面主要结合日常开发的经验,给出你关于如何在React Router v4中嵌套路由?的解决方法建议,希望对你解决如何在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,请注明来意。