美文网首页
React-Router: PlainRoute对象

React-Router: PlainRoute对象

作者: DogChen | 来源:发表于2017-04-09 15:00 被阅读0次

完整代码:


export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : {onEnter: (nextState, replace) => replace('/cat')},  
  childRoutes : [
    CatRoute(store),
    DogRoute(store)
  ]
})

export default createRoutes

解释是如下:
path作为路径名称,由于这里是根route,所以只用'/'作为名字。
component:这个router要渲染的component。
indexRoute稍后解释
childRoutes: 相当于正常<Router>下的<Route>

在PlainRoute中,indexRoute代表了path对应的默认页面,通常他的值只是一个简单的component,例如:

 indexRoute  : Home,  

在这里“Home”是被引入的一个component。

然而在某些时候我们希望当用户访问根页面的时候自动将他们redirect到其他的页面,例如用户访问"www.pet.com"时,你希望直接让他们看到"www.pet.com/cat"这个页面,这时你需要对indexRoute的值做出如下修改:

 indexRoute  : {onEnter: (nextState, replace) => replace('/cat')},  

相关文章

  • React-Router: PlainRoute对象

    完整代码: 解释是如下:path作为路径名称,由于这里是根route,所以只用'/'作为名字。component:...

  • localstorage存储对象 react-router手动刷新后传过来的state和query会失效

  • react-router和PureComponent

    react-router react-router包含3个库,react-router、react-router-...

  • React 高阶组件

    withRouter 作用是将一个组件包裹进Route里面, 然后 react-router 的三个对象 hist...

  • vue-router与react-router的区别

    vue-router是全局配置方式,react-router是全局组件方式。vue-router仅支持对象形式的配...

  • react-router

    [react-router]路由原理 参考链接 [react-router]hashHistory和browser...

  • React 自定义hook 通过 url search 来管理

    1、使用 react-router useUrlSearchState 使用 react-router 6.x 版...

  • withRouter用法

    高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象...

  • react withRouter

    高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象...

  • react withRouter

    高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象...

网友评论

      本文标题:React-Router: PlainRoute对象

      本文链接:https://www.haomeiwen.com/subject/sredattx.html