What should I do if react router does not display?

Solution for react router not displaying: 1. Add browserRouter to the parent routing component to wrap the router; 2. Use "this.props.history.go()" to refresh the component; 3. In Add "forcerefresh={true}" to the browserrouter parameter; 4. Write the hook function in "" and call it when leaving or entering this route.

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

What should I do if react router does not display?

react-router-dom The routing jump component does not display the problem

Scenario

When using the grandson route to jump to the parent route, Regardless of whether you use Link to or this.props.history.push to jump, the URL address bar changes, but the page component cannot be loaded and the page is not refreshed. Click Link to on the parent route, the same jump position, the URL remains unchanged, the page is not refreshed, but the component is loaded.

Check this.props at the jump point and target route and find that this.props.history has become the post-jump route after the jump, but this.props.location still matches the original route. For pages that load components normally, history and location are both the same route.

Solution

The blogger Baidu tried various methods for a long time before he found the real reason. Of course, he also gained many other interesting methods.

The real reason

is due to the abuse of BrowserRouter in react-router-dom. The blogger learned routing from watching videos, so he is not very clear about the characteristics. So I added a browserRouter to the parent routing component to wrap the routers, and the child route was also linked to the grandchild route, so I used the browserrouter to wrap the child route and link it to the grandchild route. In this way, the grandchild route can achieve sibling jumps without any problems. There is no problem if the grandson route jumps to the child route, but if the grandson route jumps to the parent route, the component cannot be loaded. It is no problem for the parent route to jump to the child route and the grandchild route. This is the characteristic of this pit.

So I estimate that the routing information is mainly included in the browserrouter. If the browserrouter is included in the sub-route, the information of the upper layer browserrouter will be lost.

Some other methods gained by Baidu

You can use this.props.history.go() to refresh the component. The numbers in the go brackets represent the previous one. page and the next page, this feature is refresh, you can use it if you need to refresh.

Use the method of jumping to a blank page and then jumping back, but the blogger tried it and it seemed to have no effect.

forcerefresh={true} can be added to the browserrouter parameter. The blogger tried it and it caused each route jump in the package below to be refreshed. It may be useful in specific places.

You can also write a hook function in it, which will be called when leaving or entering this route. For example, if you enter a route with permissions, you can add onEnter={myfunc} permission verification in myfunc. If it does not pass the verification, replace this.props.history and jump to achieve the purpose.

Recommended learning: "react video tutorial"

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