What are the common components of react routing?

Commonly used components of react routing are: 1. BrowserRouter, set the routing mode to history; 2. HashRouter, set the routing mode to hash; 3. NavLink; 4. Link; 5. Redirect; 6. Route; 7. withRouter and so on.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

React routing provides a detailed explanation of commonly used components

Components and their functions:

	Component	Function
Routing mode	BrowserRouter	The agreed mode is history, Use the history API provided by HTML5 to keep the UI and URL synchronized
Routing mode	HashRouter	The agreed mode is hash, use the hash of the URL to Keep UI and URL synchronized
Declarative jump	NavLink	Declarative jump can also agree on route activation status
Declarative jump	Link	Declarative jump has no active status
Redirect	Redirect	Redirect~~ replace
Match and display	Route	Match the component and display the component. That is, after a successful match, the component is immediately replaced with the matching component
Exclusive Match	Switch	Exclusive Match. If you don't want to use inclusiveness, then use Switch.
High-order components	withRouter	In components that are not switched through routing, pass the three objects history, location, and match into props On the object (higher-order component)

Structure

• BrowserRouter|HashRouter

  App (or other component)

  • NavLink|Link
  • Route
  • Redirect
    • Subcomponent
      • NavLink|Link
      • Route
      • …

##BrowserRouter

AttributeTypeFunctionbasenamestringBase URL for all locations. If your app is served from a subdirectory on the server, you need to set it up as a subdirectory. A well-formed base name should start with a slash but not end with a slashgetUserConfirmationFunctionThe function used to confirm navigation. By default,

		window.confirm is used.

Route

##Attributespathexactcomponentrender

Link

Type	Function
string |object	Route matching path. A Route without a path attribute will always match
boolean	. When true, full path matching (/home) is required. Routes are "included" by default (both / and /home match), which means multiple Routes can be matched and rendered at the same time
Function |component	The React component will be rendered when the address matches, and the route props will also be rendered together
Function	Inline rendering and wrapping components require calls to return the target component

Attribute	Type	Function
to	string | Object {pathname:,search:,hash:}	The path or address to jump
replace	boolean	Whether to replace the history record

##NavLink

AttributeTypeFunction##toreplaceactiveClassNameactiveStyle

string| Object {pathname:,search:,hash:}	The path or address to be jumped
boolean	Whether to replace the history record
string	When the element is selected, set the selection style, the default value is active
object	When the element is selected, set the selected style

Switch

This component is used to render the first Route or Redirect of the matching address, only render one route, exclusive route, full matching by default (scenario: sidebar, guide tab, etc.)

Attribute##location string objectnodeRedirect

Type	Function
		##children

This component is used to render the first Route or Redirect that matches the address. It only renders one route, exclusive route, and default full match (scenario: sidebar and breadcrumbs, boot tabs, etc.

AttributesTypefromstringstring objectbooleanbooleanboolean [Related recommendations: Redis video tutorial]

Function
from		to
Where to		push
Add history		exact
Strict match		sensitive
Case sensitive

The above is the detailed content of What are the common components of react routing?. For more information, please follow other related articles on the PHP Chinese website!