React-router嵌套路由传值(render和children)

小栗子:

例如:
我们的路由格式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let router = [
{
path: '/',
component: Rhome,
exact: true,
},
{
path: '/user',
component: User,
routes: [ //嵌套路由
{
type: Route,
path: '/user/',
component: Main
},
{
type: Route,
path: '/user/info/',
component: UserInfo
}
]
},
{
path: '/shop',
component: Shop,
},{
path: '/news',
component: NewsInfo,
},
]
  • 我们想在 渲染 通过组件传值的方式父组件吧子组件的路由传过去从而实现渲染,传统的父子组件传值是用不了的

    • 错误示范:

      1
      <Route childRoutes={val.routes}   />
    • 正确示范:

    • 传值:
      1
      2
      3
      4
      5
      6
      7
      return (
      <Route exact key={key} path={route.path}
      render = {props => (
      <route.component { ...props } routes = {route.routes} />
      )}
      />
      )

    接收:

    1
    2
    3
    4
    this.props.childrenRoute.map(
    (route, key) =>
    <Route key={key} exact path={route.path} component={route.component} />
    )

阐述:

  • 编程式导航,可以在一个组件中用this.props.history.push(“/path”,{name:”hellow”}),来进行传参,传过去的值在props.location.state中
  • Route里面还有两个属性,render和children
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    -render是一个函数,语法:render={()=>{return <div></div>}},只要你的路由匹配了,这个函数才会执行
    -children也是一个函数,不管匹配不匹配,这个函数都会执行
    -他们两个有个优先级关系,render的优先级总是高于children,是会覆盖children的

    <Fragment>
    <h1>header</h1>
    <Link to="/wiki/wikiList/">gogogo</Link>
    <Route
    path="/wiki/wikiList"
    render={
    ()=>{
    return <div>wikilist-children</div>
    }
    } //这个是只有当你路由匹配到了/wiki/wikiList才会执行
    // children={() => {
    // return <div>wikilist-children</div>
    // }
    // } //这个是只要你的路由跳到wiki了,那children就会执行
    >
    </Route>
    </Fragment>




本网站作品部分来自于网络,感谢开源社区的诸多开发者 My_Github and My_E-mail

Copyright © 2013 - 2019 Ruoduan's Blog All Rights Reserved.

访客数 : | 访问量 :

{% if theme.fireworks %} {% endif %} {% if theme.canvas_nest %} {% endif %} {% if theme.Background_music %} {% endif %}