The React the Router type

BrowserHistory

  • To manipulate the history implementation on our BOM object (window object)

  • This route is toggled by adding or replacing history via pushState() and replaceState(), which H5 does and is therefore incompatible with older browsers

HashHistory

  • Hash value of URL
  • The principle behind the Hash pattern is thisonhashchangeEvent, which can be listened for on the Window object, with good compatibility

The difference between

  • HashHistory has one in the browser’s address bar#Such as:https://juejin.cn/#/xxx
  • BrowserHistory will request the network based on the routing address when we hit the refresh button, but HashRouter doesn’t.
  • Compatibility HasHistory

React Router Component types and functions

Link

  • The to argument for route hops here passes the route address as well as NavLink

Route

  • Used for route matching when the address in the path is the same as the address in the Link component to render the corresponding component
  • React turns on fuzzy matching if you need to turn on exact matching addexact={true}

Switch

  • Used to prevent routes from being matched downward after being matched

Redirect

  • Redirection, when the route does not match the result, the route is redirected to the path

App.jsx:

import React, { Component } from 'react'
import { Link,Route,Switch,Redirect,NavLink } from 'react-router-dom'
import Home from './page/Home'
import User from './page/User'

// Link: the to parameter is used to transfer the route address
// Route: used for Route matching when the address in path is the same as the address in Link component to render the corresponding component
// Switch: prevents the route from being matched down after being matched
// Redirect: When a route fails to match the result, it is redirected to the path

export default class App extends Component {
    render() {
        return (
            <div>
                <Link to='/home'>Home</Link>
                <br></br>
                <NavLink to='/user'>User</NavLink>

                <Switch>{/* This also matches because React is a fuzzy match by default<Route path='/home/a/b' component={Home}></Route>* /}<Route path='/user'component={User}></Route>
                  <Redirect to='/home'/>
                </Switch>
                </Switch>
            </div>
        )
    }
}

Copy the code

BrowserRouter

  • Indicates that the router isBrowserHistorymodel

HashRouter

  • Indicates that the router isHashHistorymodel

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter,HashRouter } from 'react-router-dom';
import App from './App';

BrowserRouter: Indicates that the router is in BrowserHistory mode
// HashRouter: indicates that the router is in HashHistory mode

ReactDOM.render(
  <BrowserRouter>
     <App/>
  </BrowserRouter>.document.getElementById('root'));Copy the code

Difference between BrowserRouter and HashRouter

  • BrowserRouter is BrowserHistory,HashRouter is HashHistory

  • Browser address bar path is represented differently in the HashRouter address bar with #

  • Impact on state parameters after refreshing

    • BrowserRouter has no effect because state is stored in the History object

    • State parameter lost after HashRouter refresh

React Route Passes parameters

Params parameters

  • user

  • Programmatic Route navigation: this.props.history.push(‘/user/${name}/${age}’)

  • Const {name,age} = this.props.match.params

search

  • Route Link (with parameters): User

  • Programmatic routing navigation:

this.props.history.push(`/user? name={name}&age={age}`)

Copy the code

  • Component receiving parameters:

User.jsx:

import React, { Component } from 'react' import qs from 'querystring' export default class User extends Component { render() { const {search} = this.props. Location // qs.parse() key=value; Const {name,age} = qs.parse(search. Slice (1)) return (<div> <h1> {age}</h1> </div> ) } }Copy the code

The state parameter

  • user

  • Programmatic Route navigation: this.props.history. Push (‘/use’,{name,age})

  • Component parameters: const {name, age} = this. Props. The loaction. States

The use of withRouter

  • WithRouter is a method provided by the React-router-DOM library that transforms a generic component into a routing component
 import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'

//withRouter is a function that returns a component with a history API

class Header extends Component {
    render() {
        return (
            <div>
                
            </div>)}}export default withRouter(Header)
Copy the code