There will be new harvest under systematic arrangement

What is front-end routing

The concept of routing originated in the back end, where a user requests a URL to navigate to an HTML page. Front-end routing does not need server parsing, but can be implemented through hash functions and the history API, which is essentially a rule of matching front-end components. That isto say, the whole process is a single page, which is what we call a single page application.

advantages

  • Does not involve page jump, process server does not participate, reduce server pressure
  • Switch between front-end components, smooth jump, good user experience
  • Page effect cool (can add page transition animation)
  • Componentized development

disadvantages

  • Slow first screen loading (FCP)
  • Bad for SEO (SPA creates DOM elements through JS loading, crawlers just grab static resources and don’t execute JS files)
  • Page complexity increases (modifying a single page requires publishing the entire project)

What can I do if the first screen loading speed of SPA (single-page application) is slow? SPA(single page web application) SEO optimization at zero cost

Hash routing and historical routing

Hash routing (HASH) mode

The hash is the # and the character after the end of the URL, which itself can be used as the location of the page. The corresponding ID is displayed in the field, but the hashchange will not cause the browser to send a request, the hash will trigger the hashchange event, and forward and backward control can also be controlled.

widow.addEventListener('hashChange'.function() {})
Copy the code

The history mode

History comes after hash, which can only be a URL-based hash argument. If complex data is needed, there are volume limitations. History can not only put parameters in the URL, but also in a specific object.

If we don’t want ugly hashes, we can use the history mode of the route

History API

Take the Nuggets

React-router is used for basic purposes

React Router tutorial

create-react-app

React-router contains three libraries: react-router, react-router-dom, and react-router. The react-router library provides basic routing functions. Install react-router-dom (used in browsers) and React-router-native (used in Rn) depending on the runtime environment. They both rely on react-Router, which is automatically installed to create Web applications.

BrowserRouter versus HashRouter

  • A HashRouter is the simplest. It does not require a server segment to render. BrowserRouter requires the server to return HTML for different urls and requires server configuration.
  • BrowserRouter uses HTML5’s History API (pushState, replaceState, popState event) to synchronize the page UI to the URL
  • Hash History works with no server configuration and is the simplest, so if you care about a project that has an ugly URL, you should use browserHistory

Common BrowserRouter configurations:

  • Nginx configuration
// All paths will point to the path in the index.html browser, which will be automatically processed by the React-router and jump to the router without refreshing.
server {
    server_name react.thinktxt.com;
    listen 80; root /Users/txBoy/WEB-Project/React-Demo/dist; index index.html; location / { try_files $uri /index.html; }}Copy the code
  • Running mode of webpack-dev-server
// Add the argument "-history-api-fallback" directly at runtime.
"scripts": {
    "build": "webpack"."dev": "webpack-dev-server --inline --devtool eval --progress --colors --hot --content-base ./build --history-api-fallback"
},
Copy the code

Route rendering in three ways

Children > Component > render, all of which can accept Route props, including match, locaction, and history.

Only one of the three mutually exclusive options can be selected

component

Han, I’ll do whatever I get

render

Render is of type function, and Route will render the return value of this function. So what it does is it adds some extra logic

<Route path="/home" render={() = > {
   console.log('Extra logic');
   return (<div>Home</div>); } / >Copy the code

children

This is the most special rendering. Render = render; render = render; The difference is that it is passed a match argument to tell you that the path and location of the Route do not match. The second special thing is that we can render the path even if it doesn’t match. The secret lies in the match parameter mentioned earlier. We can use this parameter to determine what to render when there is a match and what to render when there is a mismatch.

// When matched, the container's calss is light, and 
       is rendered
// In case of a mismatch, the container's calss is dark, and 
       is rendered
<Route path='/home' children={({ match }) = > (
    <div className={match ? 'light' : 'dark'} >
    {match ? <Home/>:<About>}
    </div>)} / >
Copy the code

Route core rendering code

<RouterContext.Provider value={props}>
  {props.match
    ? children
      ? typeof children === "function"
        ? __DEV__
          ? evalChildrenDev(children, props, this.props.path)
          : children(props)
        : children // Children >component>render
      : component
      ? React.createElement(component, props)
      : render
      ? render(props)
      : null
    : typeof children === "function"
    ? __DEV__
      ? evalChildrenDev(children, props, this.props.path)
      : children(props)
    : null}
</RouterContext.Provider>
Copy the code

Pay attention to

When rendering with Component, the Route component will create a new React Element with React. CreateElement, which means that a new component will be created each time the render function is inlined. Instead of updating an existing component, a new component will be remounted, which can cause performance problems, so use Render or children if you use inline functions.

404 pages

Display page for route mismatch

// Switch matches in order
<Switch>
  <Route path="/" component={homePage}></Route>
  <Route path="/user" component={userPage}></Route>
  <Route component={_404Page}></Route>
</Switch>
Copy the code

Dynamic routing

Get the parameters in: props. Match. params as: :id

Embedded routines by

The Route component is nested in other pages, such as the list jump details page

React router API

Refer to the link

React Router Tutorial – Ruan Yinfang’s weblog

The react – the router source code

React Router