“This is the 13th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.”

preface

React is an MVVM framework, and the routing function is essential. When we use Vue Router, some of the most commonly used functions are the rendering of the routing page, adding the content of the routing page, configuring the routing address, routing redirection, routing parameter transmission, and embedded routing routes, etc. In this article, we’ll find out how these common functions are implemented in the React Router to get you started with React Router5.0.

A, install,

The React Router contains three packages: React-router, react-router-dom, and React-router-native. Among them, react-router is the core package of routing operation, React-router-DOM is the package used when developing web applications, and React-router-native is the package used when developing React Native mobile applications.

This article uses the Create React App scaffold to Create a React project to demonstrate the functionality of React Router5.0.

Open the command-line tool in a folder and run the NPX create-react-app react-router-demo command.

Run the CD react-router-demo command to go to the React project folder.

Run the CNPM install react-router-dom command to install the React Router5.0 dependency package.

After the installation, run the NPM run start command to start the project.

All of the demos in this article are heresrc/index.jsJust write it in the file.

How to render the routing page

The Route component is used to render, and a Router component can only render one routing page, rendering several routing pages to write several Router components.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from "react-router-dom";
ReactDOM.render(
  <div>
    <BrowserRouter>
      <Route>
      </Route>
      <Route>
      </Route>
    </BrowserRouter>
  </div>,
  document.getElementById('root')
);
Copy the code

The BrowserRouter component indicates that the route uses HTML5 History mode to jump to the page.

Vue Router has the same effect as Vue Router when mode is set to history.

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
  mode: 'history',
});
export default routes;
Copy the code

If you want to use a URL hash value to jump to a page, you can wrap the Route component with a HashRouter.

Iii. How to set the content of the routing page

By using two properties on the Route component, you can set the content to be rendered in the Route page.

  • Render: function that returns a React component.

  • Component: Value for a React component.

  • Children: function that returns a React component.

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter, Route } from "react-router-dom"; Const helloWorld = () => {return (<div> Component render Route page content </div>)} reactdom.render (<div> <BrowserRouter> <Route Render ={() => {return(<div>render page content </div>)}} ></Route> <Route Component ={helloWorld} ></Route> <Route Children ={() => {return(<div>children render routing page content </div>)}} ></Route> </BrowserRouter> </div>, document.getElementById('root') );Copy the code

Visit http://localhost:3000/ and you will see the following page

Component and children, which show that the priority of the component set is Children > Component > Render.

<Route Component ={helloWorld} render={() => {return (<div>render)}} children={() => {return ( <div>children render the page content </div>)}} > </Route>Copy the code

Only “Children Render routing page content” will be displayed on the page.

Iv. How to Set a routing address

The Route address is set through the path attribute of the Route component.

  • Path: Route address. The value is a string or array that is converted to a regular expression using path-to-regexp@^1.7.0 to match the access URL. When empty, any access URL can access the Route page rendered by the Route component.

  • Exact: indicates whether to enable exact routing address matching.

  • Strict: When true, if path is followed by a /, the access URL must be followed by a/to match.

Here’s an example of how to set a routing address, for example,

Visit a page with “first page” at http://localhost:3000/,

Use http://localhost:3000/two to visit a page content is “the second page”

Use http://localhost:3000/three to visit a page content is “the third page”

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter, Route } from "react-router-dom"; Reactdom.render (<div> <BrowserRouter> <Route path="/" render={() => {return (<div> first page </div>)}} > </Route> <Route Path = "/ two" render = {() = > {return the second page (< div > < / div >)}} > < / Route > < the Route path = "/ three children = {() =" "> {return ( </Route> </BrowserRouter> </div>, document.getelementById ('root'));Copy the code

Visit http://localhost:3000/ and you will see the following page

Visit http://localhost:3000/two, you will be found to display on the page as shown in the figure below

Visit http://localhost:3000/three, you will be found to display on the page as shown in the figure below

The reason why “first page” will be rendered is because the path component of the first page is /, and the URL is obfuscated to match the path value. /two, /three will match /, and so “first page” will be rendered. You can solve this problem by adding the exact attribute to the Route component.

< the Route path = "/" exact render = {() = > {return (< div > first page < / div >)}} > < / Route >Copy the code

And why the “third page” is also rendered when you visit any URL, because the content of the third routed page is configured with children and is displayed regardless of whether the accessed URL matches the value of the path attribute. Use the Switch component to solve this problem.

The Route component wrapped by the Switch component is rendered only by the first Route matched by the URL accessed.

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter, Route, Switch } from "react-router-dom"; Reactdom.render (<div> <BrowserRouter> <Switch> <Route path="/" exact render={() => {return (<div> first page </div>)}} > < / Route > < the Route path = "/ two" render = {() = > {return the second page (< div > < / div >)}} > < / Route > < the Route path = "/ three children = {()" => {return (<div> third page </div>)}} ></ Switch> </BrowserRouter> </div>, document.getelementById ('root'));Copy the code