React route jump, pop up a new window, transfer parameters

Time:2021-5-5

There are several scenarios in the service: there are several public pages that need to display fixed services, which need to be displayed in the new route; Later, the requirement was changed to show the business in a new window.

This brings several problems
1. Route jump
2. A new window pops up
3. The pop-up window is used to transfer parameters to request interface data. How to transfer parameters

The project was developed using hooks
First, you need to register the route
< router path = {path '} exact = {true} component = {mycomponent} >
What’s in itexactProperty is false by default. If it is true, it can only be matched when it is the same as the route. Slashes can also be matched.
If you addexact, cannot match the sub route, it is recommended to addexact

In the process of implementation, I put this line of code in the<Switch>In the later part of the route, I made a pit for myself. Later, I checked it and found that it had something to do with the matching rules of the route.
1. Match from top to bottom. Once it is matched, it will not be matched from bottom to top. The configuration of the error page, that is, if the above cannot be matched, the error page will be matched.
Because of the strict matching, in order to develop good habits
2. Long route should be put in front of short route. In this case, if the first half of the route is the same, '/ A / B' should be put in front of '/ a'
3. The long route is placed before the fuzzy matching '/ A / B' is placed in '/ A /: ID

After matching the route, you can jump directly in the code.
First of all, the components should be introducedreact-router-dom
To useprops.history.phush()The method still needs to be usedwithRouter

import {withRouter} from 'react-router-dom'
...
props.history.push({pathname:'your router',state:{your parameter}})
...
export default withRouter(memo(MyComponent));

The parameters of the jump route are set fromprops.history.location.stateGet from

If a new window needs to appear, the route jump is not applicable and needs to be usedwindow.open()Function to jump to a new window. The URL splicing and new window parameter acquisition here involvelocation, browser F12 inputlocationYou can see the structure.

locationattribute
hashSet or return the URL (anchor) starting from the well number (#). If there is no “#” in the address, an empty string will be returned.
hostSets or returns the host name and port number of the current URL.
hostnameSets or returns the host name of the current URL.
hrefSet or return the full URL. Return to the browser as it appears in the address bar.
pathnameSets or returns the path part of the current URL.
portSet or return the port number of the current URL, set or return the port number of the current URL.
protocolSet or return the protocol of the current URL. The values are ‘http:’,’https: ‘,’File:’, etc.
searchSet or return from question mark (?) Start URL (query section).

locationmethod
assign()Load a new document.
reload()To reload the current document is equivalent to pressing the “Refresh” (ie) or “reload” (Netscape) key on the browser.
replace()To replace the current document with a new one is equivalent to pressing the “Refresh” (ie) or “reload” key on the browser.

Examples are as follows

window.opne(location.origin+'your router? parameter & other parmeter');
//New window gets incoming parameters
location.search

Recommended Today

Analysis of super comprehensive MySQL statement locking (Part 1)

A series of articles: Analysis of super comprehensive MySQL statement locking (Part 1) Analysis of super comprehensive MySQL statement locking (Part 2) Analysis of super comprehensive MySQL statement locking (Part 2) Preparation in advance Build a system to store heroes of the Three KingdomsheroTable: CREATE TABLE hero ( number INT, name VARCHAR(100), country varchar(100), PRIMARY […]