React Routing

Most modern front-end applications are SPAs (single-page applications), which are applications with only one HTML page. It is more popular because of its better user experience and less strain 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 capabilities: Users navigate from one view (page) to another
  • Front-end routing is a set of mapping rules. In React, it is the mapping between URL paths and components
  • Using React routing simply means configuring paths and components (pairing).

Basic use of routing

Using the step

  1. Installation:yarn add react-router-dom
  2. Import three core components of a Route: Router, Route, and Link

    import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
  3. Wrapping the entire application with the Router component (important)
<Router>
   <div className="App">/ /...</div>
</Router>
Copy the code
  1. useLink componentAs a navigation menu (route entry)

    <Link to="/first">
  2. Use the Route component to configure routing rules and the components to be presented (routing exits)
const First = () = > <p>The content of page 1</p>
<Router>
   <div className="App">
      <Link to="/first">A page</Link>
      <Route path="/first" component={First}></Route>
   </div>
</Router>
Copy the code

Common Components

  • The Router component: wraps the entire application. A React application only needs to be used once
  • Two commonly used routers are HashRouter and BrowserRouter
  • HsahRouter: implement with hash of URL (localhost: 3000/#/first)
  • BrowserRouter: Using H5’s history API (localhost: 3000/first)
  • Link component: Used to specify navigation links (A tag)
// To attribute: pathname (location.pathname) in browser address bar
<Link to="/first"> </Link>Copy the code
  • Router component: Specifies the information about the route display component
// Path attribute: routing rule
// Component property: the component to display
// Where the Route component is written, the rendered component is displayed
<Route path="/first" component={First}></Router>
Copy the code

Route execution process

  1. Click the Link component (TAB A) to change the URL in the browser address bar
  2. The React route listens for url changes in the address bar.
  3. React Routes internally traverse all Router components and match the routing rule (PATH) with the PathName.
  4. When the routing rule (PATH) matches the PathName in the address bar, the contents of the Router component are displayed

Programmatic navigation

  • Scenario: Click the login button. After the successful login, the system redirects to the home page of the background through the code. How to achieve this?
  • Programmatic navigation: through JS code to achieve page hopping
  • History is provided by the React route to obtain information about browser history
  • Push: To jump to a page. The parameter path indicates the path to jump to
class login extends Component {
   handleLogin = () = > {
     // ...
     this.props.history.push('/home')}render(){... }}Copy the code
  • Go (n) : to advance or retract to a page. The parameter n indicates the number of pages to advance or retract (e.g. -1 indicates to move back to the previous page).

The default route

  • Question: Now the route is displayed after clicking the navigation menu, how to display it when entering the page?
  • Default route: indicates the route that will be matched when entering the page
  • The default route path is:/

    <Route path="/" component={Home} />

Fuzzy matching pattern

  • Question: Why is the default route successfully matched when the Link component’s to attribute value is “/login”?
  • By default, React routes are in fuzzy matching mode
  • Fuzzy matching rule: As long as pathName starts with PATH, the match is successful
<Link to="/login"> Login page </Link><Route path="/" component={Home} />The match is successful// Path represents the path property of the Route component
// PathName represents the Link component's to property (i.e. location.pathname)
Copy the code
path Pathname that matches
/ All the pathname
/first /first/ first/a/b/…

An exact match

  • Question: The default route is always displayed. How can I avoid this problem?
  • Add an exact attribute to the Route component to make it an exact match
  • Exact match: The route is displayed only if the path and PathName match exactly
// At this point, the component can only match pathName ="/"
<Route exact path="/" component=... />
Copy the code

Recommended: Add the exact attribute to the default route

A small summary

  1. React routes can effectively manage multiple views (components) and implement SPA
  2. The Router component wraps the entire application and needs to be used only once
  3. The Link component is the entry and the Route component is the exit
  4. Programmatic navigation through props. History
  5. Default fuzzy match, add exact change exact match
  6. React Everything about routing is a component, and you can think of routing as a thinking component