Introduction to routing in react

         Most modern front-end applications are SPA (single page applications), that is, applications with only one HTML page. It is more popular because of its better user experience and less pressure on the server. In order to effectively use a single page to manage the original multi page function, front-end routing came into being. Front end routing function: allows users to navigate from one view (page) to another

• Front end routing is a set of mapping rules. In React, it is the corresponding relationship between URL path and component

• Using React routing is simply to configure paths and components (pairing)

Basic for React routing

        step

1. Installation package.npm I react router DOM (recently released 6)
   1. This package provides three core components: hashrouter, route and link
2. Import the package and use. Use HashRouter to wrap the entire application. There will only be one Router in a project

import { HashRouter, Route, Link } from 'react-router-dom

      3. Use Link to specify the navigation Link

        Code demonstration

import React from 'react'
import ReactDom from 'react-dom'
import { HashRouter, Route, Link } from 'react-router-dom'
import Search from './pages/Search.jsx'
import Comment from './pages/Comment.jsx'
export default function App () {
  return (
    <div>
      <h1>react Basic use of routing</h1>
      <HashRouter>
        <Link to="/comment">comment</Link>
        <Link to="/search">search</Link>

        <Route path="/comment" component={Comment} />
        <Route path="/search" component={Search} />
      </HashRouter>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

Routing three objects - Router

Understand two routes

Hashrouter: hash mode

BrowserRouter: history mode

content

Router component: wrap the whole application. A React application only needs to be used once

There are two common routers: HashRouter and BrowserRouter

• HashRouter: implemented using the hash value of the URL

  • Principle: it is realized by listening to the hashchange event of window

• (recommended) browserouter: implemented using the history.pushState() API of H5

  • Principle: it is realized by listening to the pop state event of window

Code recommendation:

         Use the import renaming of es6 to unify the name: no matter which routing object is imported, it is called Router

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { HashRouter as Router, Route, Link } from 'react-router-dom'

Link of three routing objects

difference

Master the difference between Link and NavLink

You can use NavLink to set the highlight effect

Import test

import { Link, NavLink } from 'react-router-dom

Link

The Link component will eventually be rendered as an a tag to specify the route navigation

• to attribute, which will be rendered as the href attribute of a tag in the future

• The link component cannot show which link is selected

NavLink

NavLink component, a more special Link component, can be used to specify the current navigation highlight

The style name is. active. You can modify the highlight effect by yourself

explain:

• The to attribute, used to specify the address, will be rendered as the href attribute of the a tag

• activeClassName: used to specify the highlighted class name. The default is active. Generally do not modify.

• Exact: exact match, which means that the address bar and the attribute value of to must exactly match the class name to take effect

Test code

        

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom'
import Search from './pages/Search.jsx'
import Comment from './pages/Comment.jsx'
export default function App () {
  return (
    <div>
      <h1>react Basic use of routing-Link</h1>
      <Router>
        <div>
          Link:
          <Link to="/search">search</Link>
          <Link to="/comment">comment</Link>
        </div>
        <div>
          NavLink: Built in highlight class
          <NavLink to="/" exact>homepage</NavLink>
          <NavLink to="/search">search</NavLink>
          <NavLink to="/comment">comment</NavLink>
        </div>
        <Route path="/comment" component={Comment} />
        <Route path="/search" component={Search} />
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

Summary

1. Both link and NavLink are used for route jump. They all use the to attribute to specify the jump address

2. The difference between link and NavLink is that the path pointed to by NavLink will have its own css class name called. action

Route, one of the three objects of routing

Function and format of route

1. Role: determine route matching rules

2. Format: < route path = "/ XX / XX" component = {component} > < / route >

Matching rules

Noun agreement:

1. Path: the value of the path attribute in the Route component

2. pathname: refers to the following format

   1. Attribute value of to in link component

   2. Address in address bar

Fuzzy matching rule

1. As long as pathname starts with path, the match is successful

2. If the matching is successful, load the corresponding components;

3. The whole matching process is to match one by one. If a match is successful, it will not stop matching.

Fuzzy matching and exact matching

1. The default is fuzzy matching

2. Supplementary exact can be set to match exactly

Example

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
const Home = () => <div>homepage</div>
const Article = () => <div>Article list page</div>
const ArticleDetail = () => <div>Article details page</div>
export default function App () {
  return (
    <div>
      <h1>react Basic use of routing</h1>
      <Router>
        <NavLink to="/">homepage</NavLink>&nbsp;
        <NavLink to="/article">Article list page</NavLink>&nbsp;
        <NavLink to="/article/123">Article details page-123</NavLink>&nbsp;
        <hr />
        <Route path="/" component={Home} />
        <Route path="/article" component={Article} />
        <Route path="/article/123" component={ArticleDetail} />
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

Summary

• Description of path

  • By default, / can match any / start path

  • If the path of path matches, the corresponding component will be render ed

• exact, which means exactly matching a path

  • Generally speaking, if the path is configured with /, you need to configure the exact attribute

Switch and 404

Switch

Wrap multiple Route components with Switch components.

Under the Switch component, no matter how many Route routing rules match successfully, only the first matching component will be rendered

 <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/article" component={Article} />
          <Route path="/article/123" component={ArticleDetail} />
          <Route component={Page404} />
        </Switch>

Process 404 pages

Idea: without setting the path attribute, put the route corresponding to page 404 in the last position inside the switch

          <Route path="/" exact component={Home} />
          <Route path="/article" component={Article} />
          <Route path="/article/123" component={ArticleDetail} />
          <Route component={Page404} />

Page Jump Redirect

<Redirect from="/" exact to="/comment" />