Shulou(Shulou.com)06/01 Report--

This article is about what the common components of react routing are. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

React routing common components are: 1, BrowserRouter, set the route pattern to history;2, HashRouter, set the route pattern 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 common components

Components and their roles:

Components function route pattern BrowserRouter convention pattern is history, use history API provided by HTML5 to keep UI and URL synchronous route pattern HashRouter convention pattern is hash, use URL hash to keep UI and URL synchronous declarative jump NavLink declarative jump can also agree on route activation state declarative jump Link declarative jump inactive state redirection Redirect redirection ~ replace match and show Route matching components. That is, after the match is successful, the component is immediately replaced by the matching component exclusive match Switch exclusive match. If you don't want to use inclusiveness, use Switch. High-level components withRouter transfers history, location and match objects into props objects from components that are not routed (high-level components)

structure

BrowserRouter | HashRouter

App (or other components)

Sub-component

NavLink | Link

Route

...

NavLink | Link

Route

Redirect

BrowserRouter

The attribute type acts as the base URL for all locations of the basenamestring. If your application is provided from a subdirectory on the server, you need to set it as a subdirectory. A well-formed base name should start with a slash, but cannot end with a slash. GetUserConfirmationFunction is used to confirm the navigation function. Window.confirm is used by default.

Route

The attribute type functions as pathstring | object routes match the path. Route without the path attribute will always match when exactboolean is true, requiring full path matching (/ home). The route defaults to "included" (/ and / home both match), which means that multiple Route can match and render componentFunction at the same time | React components will be rendered only when component addresses match, and route props will be rendered along with renderFunction inline rendering and wrapper components, which requires a call to the target component to be returned.

Link

Attribute type function tostring | object {pathname:,search:,hash:} whether the path or address to be redirected replaceboolean replaces the history

NavLink

Attribute type function tostring | object {pathname:,search:,hash:} whether the path or address to be redirected replaceboolean replaces the history activeClassNamestring. When the element is selected, the selected style is set. The default value is activeactiveStyleobject. When the element is selected, set the selected style.

Switch

This component is used to render the first Route or Redirect that matches the address, rendering only one route, exclusive route, default full match (scene: sidebar, boot tab, etc.)

Attribute type function locationstring object

Childrennode

Redirect

This component is used to render the first Route or Redirect that matches the address, rendering only one route, exclusive route, default full match (scene: sidebar and bread crumbs, boot tab, etc.

The attribute type function fromstring comes from tostring object to add history to pushboolean. Exactboolean strictly matches sensitiveboolean case sensitivity. Thank you for reading! This is the end of this article on "what are the common components of react routing?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.