The solution to the page not refreshing after the route changes after react jumps

question

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, using the withRouter associated component to jump to the page is as follows

Routing Code

Solution

Adding a key to the top-level element of the routing component increases the recognition of the route, because ordinary jumps are identified based on the path, but when the path carries parameters, the route cannot be accurately identified. However, when jumping to a page, a key will be added to the localtion object for each address. Print as follows

 // Component mounting componentDidMount() {
    console.log(this.props.location);
  }

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

 render() {
    return (
      {/*This is the key*/}
      <div key={this.props.location.key}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/products/:id" component={Products} />
            <Route exact path="/about" component={About} />
            <Route exact path="/solution" component={Solution} />
            <Route
              exact
              path="/solutionDetails/:id"
              component={SolutionDetails}
            />
            <Route exact path="/download" component={Download} />
            <Route path="/about" component={Download} />
            <Route exact path="/details/:id" component={Details} />
            <Route path="/contact" component={Contact} />
            <Route component={ErrorPage} />
          </Switch>
      </div>
    );
  }

However, you may find that this.props is an 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 subcomponents of app.js

import React, { Component } from "react";
import { withRouter } from "react-router";

class routers extends Component {
 /**
  * Life cycle function */
 // Component mounting componentDidMount() {
   console.log(this.props.location);
 }
 render() {
   return (
     <div key={this.props.location.key}>
     </div>
   );
 }
}
export default withRouter(routers);

This is the end of this article about the solution to the problem that the page does not refresh after the route changes after react jumps. For more related content about the page not refreshing after react jumps, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!