React-router(8)Link 标签 to 属性为对象时(路由信息传值)

x33g5p2x  于2022-03-06 转载在 其他  
字(1.7k)|赞(0)|评价(0)|浏览(520)

DEMO地址
参考 6.routeInfo.js

在组件里,每个组件的路由数据,都是各自独立的。

在之前分析中,已知:

  1. match 属性的值,存储的是该 Route 标签的路由;
  2. location 属性的值,其中 url 和 path 不同 Route 组件中,值是相同的;

但【2】并不准确,准确的说,自带的 hash , search , pathname 这三个属性的值,是相同的;

假如你在里面添加了其他数据,那么结果就有所不同了。

例如 Link 标签,他有一个属性 to,可以用于路径跳转。

比较常见的是以下这种写法:

<Link to={`${props.match.url}/`}>子路由</Link>

但是,to 的值,也可以用对象,例如这样:

<Link to={{
    pathname: `${this.props.match.url}/1`,
    myState: '这是我自定义的变量'
}}>示例1</Link>

当路由信息匹配时(参照DEMO):

1、父组件的路由信息为:

{
    "match": {
        "path": "/RouteInfo",
        "url": "/RouteInfo",
        "isExact": false,
        "params": {}
    },
    "location": {
        "pathname": "/RouteInfo/1",
        "search": "",
        "hash": ""
    },
    "history": {
        "length": 9,
        "action": "POP",
        "location": {
            "pathname": "/RouteInfo/1",
            "search": "",
            "hash": ""
        }
    }
}

2、被传值的子组件的路由信息:

{
    "match": {
        "path": "/RouteInfo/1",
        "url": "/RouteInfo/1",
        "isExact": true,
        "params": {}
    },
    "location": {
        "pathname": "/RouteInfo/1",
        "myState": "这是我自定义的变量",
        "search": "",
        "hash": ""
    },
    "history": {
        "length": 24,
        "action": "PUSH",
        "location": {
            "pathname": "/RouteInfo/1",
            "myState": "这是我自定义的变量",
            "search": "",
            "hash": ""
        }
    }
}

可以看到,被传值的子组件的路由信息,location 会多了一个属性。

但是请注意,以下几种情况会导致失去这些信息:

  1. 刷新页面;
  2. 访问更深一层的子组件(因为信息被更新了);
  3. 刷新后,访问相同的 url。举例来说,你访问了该 url,传值了也收到了,然后刷新页面,再点击该 url,是没有的。原因是相同 url 跳转;

相关文章