What should I do if the react route jump does not refresh?

##Problem

There seem to be many reasons for this problem. My problem is that the url with parameters cannot be refreshed. In router 5.0 version, use the withRouter associated component to jump to the page

As shown below

Solution

Add a key to the top element of the routing component to increase the identification of the routing, because ordinary The jump is identified based on the path, but when the path takes parameters, the route cannot be accurately identified. However, when jumping to the page, each address will add a key to the localtion object. Print as follows

 // 组件挂载
  componentDidMount() {
    console.log(this.props.location);
  }

We can accurately locate the route by binding this key to the top element of the route

 render() {
    return (
      {/*就是这个key*/}
      <div>
          <switch>
            <route></route>
            <route></route>
            <route></route>
            <route></route>
            <route></route>
            <route></route>
            <route></route>
            <route></route>
            <route></route>
            <route></route>
          </switch>
      </div>
    );
  }

However, you may find that this.props is { } Empty object

That may be because you did not use withRouter to associate the component, just associate it. Note that app.js cannot be associated, withrouter can only be associated with routing components or sub-components of app.js

import React, { Component } from "react";import {withRouter } from "react-router";class routers extends Component {
 /**
  * 生命周期函数
  */
 // 组件挂载
 componentDidMount() {
   console.log(this.props.location);
 }
 render() {
   return (
     <div>
     </div>
   );
 }}export default withRouter(routers);

recommends learning: "react video tutorial"