1. What is the implementation principle of react-Router?

The idea of client routing implementation:

  • Hash based routing: By listening

hashchange

Event, aware of changes to the hash

  • To change the hash, go directly to location.hash= XXX
  • H5 history-based routing:
  • Changing urls can be done via history.pushState and resplaceState, which push the URL onto the stack, as well as using apis such as history.go()
  • Listening for URL changes can be implemented by custom event triggering

The idea behind the React-Router implementation is:

  • Based on the history library to achieve the above different client route implementation ideas, and can save the history records, etc., smooth the browser differences, no perception of the upper layer
  • The list is maintained, recycled every time the URL changes, routed through the configured path, matched to the corresponding Component, and render

2. How do I configure the React-router to implement route switchover

(1) Use components

Route matching is done by comparing the Path attribute with the pathName of the current address. When a match is successful, it renders its contents, and when it does not, it renders null. Those without a path will always be matched.

// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>
Copy the code

(2) Use components and components together

Used to group.

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
</Switch>
Copy the code

Not necessary for grouping, but usually useful. One iterates through all its children and renders only the first element that matches the current address.

(3) Use, and components

).

<Link to="/">Home</Link>   
// <a href='/'>Home</a>
Copy the code

Is a special type that can be defined as “active” when its to property matches the current address.

// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
    React
</NavLink>
// <a href='/react' className='hurray'>React</a>
Copy the code

When we want to force navigation, we can render one, and when a render is rendered, it will be directed using its to property.

3. How to configure redirection on the react-router?

Redirection of routes using components:

<Switch>
  <Redirect from='/users/:id' to='/users/profile/:id'/>
  <Route path='/users/profile/:id' component={Profile}/>
</Switch>
Copy the code

When request /users/:id is redirected to ‘/users/profile/:id’ :

  • Attribute from: string: The path to be redirected to be matched.
  • Property to: string: THE URL string to redirect
  • Property to: object: redirects the location object
  • Property push: bool: If true, the redirection operation will add the new address to the access history and cannot go back to the previous page.

4. The difference between the Link tag and a tag in the React-router

The react-router takes over its default link jump behavior, which is different from traditional page jumps. The “jump” behavior only triggers the corresponding content update of the corresponding page, but does not refresh the entire page.

Three things have been done:

  • If you have onclick, do onclick
  • Prevent a tag from default event when click
  • Use history (history & hash) to jump to the href(to) where the link has changed and the page has not been refreshedTags are simply hyperlinks used to jump from the current page to another page (in the case of non-anchor points) at the href point.

What does it take to jump a tag after the default event is disabled?

let domArr = document.getElementsByTagName('a')
[...domArr].forEach(item=>{
    item.addEventListener('click',function () {
        location.href = this.href
    })
})
Copy the code

5. How does the react-router obtain URL parameters and historical objects?

(1) Obtain URL parameters

  • Get the value

Route configuration or common configuration, such as ‘admin’, and parameter transmission mode, such as ‘admin’? Id = ‘1111’ ‘. Through this. Props. The location. The search for access to a url string ‘? Id =’1111’ you can use url, QS, QueryString, browser API URLSearchParams object or its own encapsulating method to resolve the value of id.

  • Dynamic routing of values

The route must be configured as a dynamic route, for example, path=’/admin/:id’ and parameter transmission mode, for example, admin/111. Through this. Props. Match. Params. Id to obtain the value of the dynamic routing id part of the url in addition can also through useParams (Hooks) to obtain

  • Pass values through query or state

For example, in the Link component’s to property, you can pass an object {pathName :’/admin’,query:’111′,state:’111′}; . By enclosing props. The location. The state or enclosing props. The location. The query to retrieve, the parameters of the transmission can be the object, array, etc., but there is just refresh the page and parameters will be lost.

(2) Obtain the history object

  • If React >= 16.8, use the Hooks provided with the React Router
import { useHistory } from "react-router-dom";
let history = useHistory();
Copy the code
  • Get the history object using this.props. History
let history = this.props.history;
Copy the code