react-router v4 路由跳转 路由传参 路由监听

路由跳转——使用 withRouter

withRouter高阶组件，提供了history让你使用~

import React from "react";
import {withRouter} from "react-router-dom";

class MyComponent extends React.Component {
  ...
  myFunction() {
    this.props.history.push("/some/Path");
  }
  ...
}
export default withRouter(MyComponent);

路由传参

// 定义有参数的路由
<Route exact path="/search/:category/:keyword?" component={Search}/>
// 获取路由中参数
{this.props.match.params.category}

监听路由变化

• 监听路由地址的变化

1. 使用 react-router 渲染的组件在 props 中会接收 history 的对象，
2. 使用history的listen方法添加自定义监听事件
3. 执行自定义的监听事件 默认接收参数为一个对象location：{ hash: “” pathname: “” search: “” state: undefined }
4. 页面销毁时移除监听事件

componentDidMount = () => {
  // 1.接收到props中的history对象
  const history = this.props.history;
  // 因为此时不会触发history的listen函数，所以需要手动执行一次此方法设置当前菜单，
  this.setActiveMenu(history.location);
  // 2. 使用history的listen方法添加自定义监听事件 参数为一个回调函数 即：路由改变之后执行的方法
  this.unListen = history.listen(this.setActiveMenu);
};

// 3. 监听到路由变化时执行该方法， 该方法默认接收一个参数：location
setActiveMenu = (location) => {
    // ...这里写你的逻辑代码 设置高亮的menu
    /*
    * 使用正则判断当前浏览器path是否与菜单项中的key相匹配，
    * const isActivePath = new RegExp(`^${node.key}`).test(pathname);
    * 此正则可以匹配动态路径（类似于/product/:id这种传参的路由），所以即便是动态路由也能高亮对应菜单
    */
    this.setState({
      activeMenu: activeMenu
    });
}

componentWillUnmount = () => {
  //4. 移除监听
  this.unListen();
};