react路由传参,自身跳转

这次页面有一个逻辑，需要自身路由跳转到自身。那么正常情况下，咱们使用得history几个API，就不能用了，这里考虑使用a链接跳转或者是window.open()。最后还是选择了window.open().因为点击得同时，我还需要做一点其他得操作，所以就放在事件里面，它也比a链接灵活。

再写得时候就想着简单得总结下 路由跳转和路由传参。

1.search传参

       this.props.history({
           pathname:'/router',
           search:'id=123456'
       })
       // 这样传参 会参数会拼接再url后面 /router?id=123456

好处就是，刷新页面参数不会丢失。一般来说如果只是传id类得数据，不走仓库得情况下，这样用来不错。多个参数用&拼接

2.params传参

实际这个传参就是动态路由，优点和search传参一样，刷新不对丢数据。

      this.props.history({
          pathname:"/router/18"
      })

缺点就是，你需要再定义路由得时候，定义参数，如果是确定参数，就没有问题，但是参数不确定得情况，就不适合了。

3.query传参

      this.props.history.push({
          pathname:'/demo',
          query:{id:18,name:'zs'}
        })
   // 页面接参数 this.props.location.query

这个刷新页面数据会丢失，一般情况下使用得路由模式都是BrowserRouter。手动刷新子页面得话，父页面很多传参方式都会失效。

4.state传参

      this.props.history.push({
          pathname:'/demo',
          state:{id:18,name:'zs'}
        })
   // 页面接参数 this.props.location.state

这个传参和query一样，数据隐式传参，就是再url或者其他地方不感知，state传参好处就是 刷新页面数据一般不会丢失。

路由跳自身，再vue上会报错，react,，如果你写成动态路由，或者是传参得方式，你会发现地址栏url变了，但是组件不会重新挂载。（不建议强制刷新组件状态）

所有就需要用其他得跳转方式，a链接跳转和window.open这个实际是再重新打开了一遍页面，这样操作就能跳转自身且刷新页面了。不过就是网速不好得话，速度会慢一点。

   window.open('url','target') 
   // window.open('/router','_blank') 打开router路由再新页面

PS:路由传参，页面接参得方式，直接再钩子函数里面，打印this.props就可以了。