Routing information

The Router component creates a context and injects some information into the context

This context is hidden from the developer, and if the Route component matches an address, it passes information from these contexts as properties to the corresponding component

history

It is not the window.history object, which we use to skip addresses without flushing

Why not just use the history object

  1. The React-router supports Hash and History modes. If window. History is directly used, only one mode can be supported
  2. When using Windows. History. PushState method, there is no way to receive any notice, will lead to the React cannot address has changed, as a result, not to render the component

  • Push: to push a new address onto the stack (history stack)

    • Parameter 1: the new address
    • Parameter 2: Optional, accompanying status data

  • Replace: Replaces the current address in the stack with a new address

  • Go: is consistent with window.history

  • Forward: the same as window.history

  • Back: the same as window.history

location

The same object as history.location, but different from window.location

The location object records information about the current address

We usually use a third-party library called Query-String to parse the data in the address bar

match

This object holds information about the route match

  • IsExact: Indicates whether the current path matches the configured path exactly
  • Params: obtains the data corresponding to the path rule

In fact, when writing the Path property of the Route component, you can write a string pattern.

The React-Router uses a third-party library called path-to-Regexp, which converts a string re into a real regular expression.

How to pass data to a page:

  1. Use state: Add state to the push page
  2. Use search: fill the data into the address bar? after
  3. Using hash: Fill in data to the hash
  4. Params: Fill the data into the path

Non-routed components obtain routing information

Some components are nested in common components rather than in Route. Therefore, there is no routing information in props. If these components need to obtain routing information, they can use either of the following methods:

  1. Routing information is passed layer by layer from parent component to child component
  2. Wrap the component to be used using the High-order component withRouter provided by the React-Router, which returns a new component that will inject routing information into the provided component.