“Route” means that it is assigned to the corresponding handler based on the URL. More generally, a route is a mapping from a URL to a function.

The URL is mapped to the corresponding function (which is generalized and can be a front-end or back-end function), and the corresponding function decides what to return to the URL. Routing is doing a matching job.

To be clear, any time you type the URL in the browser’s address bar and press Enter, you will definitely make a request to the backend server. URL updates made using the Router library API will not be requested by the backend server if they are performed on a page by clicking a button, etc.

Back-end routing and server rendering

In the past, web pages were usually routed directly to the client browser through back-end matching. The HTML of a web page is rendered by a template engine on a back-end server and handed to the front end.

Server-side rendering benefits: For SEO-friendly pages, server-side rendering is safer for security-sensitive pages.

Disadvantages: strong coupling; There is no separation at the front and back ends.

The front-end routing

Front-end route definition: URL matching rules are controlled by the front-end.

There are two common front-end routing modes:

  • Front-end routes with hash features high compatibility. The downside is that urls with # signs don’t look good.
  • The advantage of the front-end route without hash is that the URL does not contain hash signs. The disadvantage is that both browser support and back-end server support are required.

React-router and react-router-DOM are related

  • React-router is a Monorepo repository; React-router, react-router-dom, react-router-config, and react-router-native are stored in the react-Router packages directory.

  • React-router is the core method and component library that is dependent on react-router-DOM and react-router-native. For example, provide router, route, redirect, Prompt, switch, withRouter, matchPath components or methods

  • The react-router-dom BrowserRouter library provides BrowserRouter, HashRouter, Link, and NavLink components for direct use

  • React-router-native Indicates the routing library of the native end

How are route components and Switches rendered

The core is the matched method.

Matched is the path parameter passed through the current Route, and then using path and several other related parameters to generate a path regular, and then using this path regular to match the pathname attribute in the window.location object. If there is a match returned, The current Route is a routing component that matches the current URL PathName. If no match is returned, null is returned, indicating that the current Route component is not matched.

<Switch>
      <Route exact path={` ${appCode} `}component={Home} />
      <Route exact path={` ${appCode}Home`} component={Home} />
</Switch>
Copy the code

When there is no switch component, any Route component that matches the current location.pathname will be rendered.

When there is a Switch component, the switch component’s first child element (note that the Route component is the first child element) is traversed inside the Switch component, the first match is found from top to bottom (only one is rendered), and the computedMatch attribute is passed in.

Redirect components?

Github.com/willson-wan…