react(ant-design)路由-router踩坑

路由的跳转

pathname、history

关于路由的跳转问题，广泛是以 <Link>标签，和事件触发 两种方式来进行的：

Link标签： <Link to={{ pathname : ‘ /sort ‘ , query : { name : ‘sunny’ }}}> 点击跳转 </Link> 

事件：this.props.history.push({ pathname : ‘/sort’ ,query : { name: ‘ sunny’} })

值得注意的是，我在网上看到的资料，pathname这个属性名写的是path，可是通过个人测试发现使用path并不能实现跳转，还会报错：Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

而用pathname就能够解决这个问题；

其次，使用事件触发的方式，要使用this.props.history.push，而网上的不少说法是写this.props.router.push，这样写会报错：router为undefined。

withRouter

在摸索react路由的过程当中，还碰到一个问题：在子组件中想要触发跳转事件时，我按上述的history写了一个点击事件，点击后执行this.props.history.push({pathname:’/xxx’})，可是出现了报错，说history未定义。在网上搜索后找到了一个合适的解决方法：

先在子组件中引入withRouter： import { withRouter } from “react-router-dom”;

而后在子组件export导出时，用withRouter将组建包裹起来： withRouter(ChildComponent)

这样便可使得子组件的props属性也带上了history方法。

路由的传参、取参

Params

第一种形式是将参数直接挂在url的后面，用”/”隔开，可是咱们再定义路由以前就要把这个参数约定好，形如 /sort/:id，这里的id能够看作一个占位符，当咱们跳转到形如 /sort/5的路径时，咱们会转到参数id=5对应的页面。

此时咱们能够经过params来获取参数。这个时候又碰到坑了：

网上的资料大多数是说经过this.props.params.id便可取到参数id的值，可是我实际操做过程当中，显示params为undefined。因而我把this.props在控制台打印出来，看到其中包含了form，history，location，match，routerData，staticContext，逐个点开发现，咱们须要的params居然在match里面！

也就是说，要取得路由形式为/sort/:id的参数，其实是经过 this.props.match.params.id取到的，关于这个问题被不少网上的答案误导了。

query

第二种传参形式就是在写跳转连接的时候，将路径和参数以对象的形式写在一块儿，如：{ pathname : ‘/sort’ ,query : { name: ‘ sunny’}}。

这样的形式传递的参数，是不会显示在url中的，而且在刷新页面的时候，参数会丢失，（相似于post传参）。

当咱们第一次跳转到*/sort页面的时候，能够经过  this.props.location.query  取到query中输入的参数。

值得注意的是，通过个人测试后发现，query这个键名能够任意命名，例如”aaa”，以后在跳转到的页面经过 this.props.location.aaa也能够获取到参数。