The React routing

The installation

  1. cnpm i react-router-dom -S

The main API

BrowserRouter or HashRouter

  • BrowserRouter uses history mode;
  • HashRouter uses hash mode;
  • The Router includes listening for path changes and passes the appropriate path to the child component.

The Link and NavLink

  • Usually the jump of a path uses a Link component, which is eventually rendered as an A element, and the to attribute is used to set the jump path.
  • NavLink adds style attributes to Link;

Route

  • Route: used to match paths.
  • Path property: used to set the matched path;
  • Component property: Render component after setting match to path;
  • “Exact” :

use

  1. Easy to use: modify app.js and index.jsx

  1. The props accepted by the routing component

  1. NavLink Label switch

  1. Seal NavLink for fun
  • New components/MyNavLink/index. JSX

  • Look at the props

Fuzzy matching and strict matching of routes

Fuzzy matching

Strict match (not easy to use)

Redirect to Redirect

Embedded routines by

There are three parameter transmission modes

  1. Parmas of route transmission parameters

  1. Search for route transmission parameters

  1. State of route transmission parameter (this state is not the other state)

Routing Replace mode

Routing programmatic navigation

General components use the routing component API

BrowserRouter and HashRouter

Route lazy loading

  • App.js

  • The results

A Loading indicator is required to display lazily loaded components.

  • Suspense displays Loading components

  • Finally, click switch route for the first time to complete lazy route Loading. The Loading result will display the Loading placeholder.

Switch (matching one will not match it down)

Route three rendering methods

1.component(only render when location matches)

2. Children (render regardless of whether loacations match)

3. Render (only render when location matches)

Children > component > render

Component rendering can also be written as a callback

The Component callback is rendered differently than the Render callback

The above figure shows that the component has been remounted and unmounted, but has changed its value to update the component instead of remounting it. If 㢟 were more complicated, it would be less elegant. The correct usage is as follows:

Use Render instead of Component if it is an inline function because component causes component remount and remount. React.createElement is called when rendering the Component. Each time a different component is created, the component will be remounted. Render is just a direct call to the function.

Dynamic routing

basename

The base values of all urls. If your application is deployed in a subdirectory of the server, you need to set it to a subdirectory. The basename format is preceded by a slash and followed by no slash.

Unified Route Configuration

NPM I react-router-config

Solution 2 Create a vm through manual traversal

Reactrouter.com/web/example…

Shallow resolution of front-end routes

The principle of

  • 1. Change the URL without forcibly refreshing the page.

  • 2. Listen for URL changes and display the changed content.

Two operations that change the URL but do not force a refresh of the page

  • 1. Change the URL using the URL hash.

  • 2. Modify the URL in history mode in H5.

The URL hash

  • The essence is to change the windown.location.href property.

  • You can change the href by assigning location.hash, but the page does not refresh.

The history of H5

The history interface was added to H5 and has six modes for changing urls without refreshing pages.

  • ReplaceState: replaces the original path.

  • PushState: uses the new path.

  • PopState: rollback of a path.

  • Go: to change the path forward or backward;

  • 4. forward: to change the path;

  • Back: Changes the path backwards.

  • Vscode installs the Live Server plug-in