What should I do if the react route does not refresh when it returns?

Solution to not refreshing when react route returns: 1. Add a key to the top element of the routing component to increase the recognition of the route; 2. Bind the key to the top element of the route to accurately locate the route ;3. Use withRouter to associate the component.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What should I do if the react route does not refresh when it returns?

react Solution to the problem that the page does not refresh after the route changes

Recently, in the process of learning React, I encountered the problem that the page does not refresh after the route jumps This article will introduce the solution in detail. Friends who need it can follow the editor to learn together

Question

It seems that there are many reasons for this kind of problem. I The problem is that the url with parameters cannot be refreshed. In version 5.0 of router, use the withRouter associated component to jump to the page.

As shown below

##Routing code

Solution

Add a key to the top element of the routing component to increase the identification of the route, because ordinary jumps are identified based on the path. But when 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 bind this key to the top element of the route to accurately locate the route

render() {
   return (
     {/*就是这个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, maybe you found 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 key={this.props.location.key}>
     </div>
   );
 }
}
export default withRouter(routers);

Recommended learning: "

react video tutorial"

The above is the detailed content of What should I do if the react route does not refresh when it returns?. For more information, please follow other related articles on the PHP Chinese website!