This is React Learning’s 10th blog post, and there are gifts at the end of this post. Thank you very much for your support!

📢 Hello everyone, I am Xiao Cheng, a sophomore front-end enthusiast

📢 Learn the React route in React

📢 Thank you very much for reading

📢 May you be true to yourself and love life

The introduction

In the pages we wrote before, if we use our conventional thinking to think, we may need to write a lot of pages, for example, to make a TAB bar, we may think that each option should correspond to an HTML file, which will be very troublesome, even unfriendly, we call this kind of MPA is also called multi-page application.

🍕 1. The SPA

And to reduce that, we have another application called SPA, a one-page application

It is faster than traditional Web applications because they execute the logic in the Web browser itself rather than on the server. After the initial page loads, only data is sent back and forth, not the entire HTML, which reduces bandwidth. They can request tags and data independently and render the page directly in the browser

🍔 2. What is routing?

Routing displays different content or pages based on different URLS

In SPA applications, most page results do not change, and only some content is used

Advantages and disadvantages of front-end routing

advantages

Good user experience, no need to get the entire HTML from the server every time, quickly show to the user

disadvantages

  1. SPA can’t remember where the page was scrolling before, or when it returns to the page again
  2. Using the browser’s forward and back keys rerequests, not using the cache properly

🍟 3. Mechanism of routing

Front-end routing relies on time history, the browser’s history

History is a BOM attribute. There are apis for manipulating history in H5

The browser’s history is like a data structure on a stack, in which moving forward is equivalent to pushing in and moving back is equivalent to pushing out

In addition, listen can be used to monitor the change of the request route to determine whether the path is changed

The createBrowserHistory API has been added in H5 to create a history stack that allows us to manually manipulate the browser’s history

New API: pushState, replaceState, similar to Hash implementation. With H5 implementation, single page routing URL will not have a # number, which will be more beautiful

🌭 4. Use basic routes

React-router-dom

A library for web users

  1. A React warehouse
  2. Very common, basically every application uses this library
  3. Designed to implement SPA applications

First of all, we should make clear the layout of the page, and divide the navigation area and the display area

To introduce the react-router-DOM library, expose some properties Link, BrowserRouter…

import { Link, BrowserRouter, Route } from 'react-router-dom'
Copy the code

The A label in the navigation area is changed to the Link label

<Link className="list-group-item" to="/about">About</Link>
Copy the code

At the same time, we need to use Route tag to match paths, so as to realize component switching of different paths

<Route path="/about" component={About}></Route>
<Route path="/home" component={Home}></Route>
Copy the code

We need to add the Router to manage the Route. If we use the Router to manage the Route and Link respectively, it will not be able to do so. Page hopping can only be performed under the management of a router.

So we can also wrap BrowserRouter around the outer tag of Link and Route tags, but then when we have too many routes, we have to keep changing the location of the tag, so we can do this

We go back to the index.js file in app.jsx directory and wrap the entire App component tag with BrowserRouter tag, so that the entire App component is managed by a router

// index.js
<BrowserRouter>
< App />
</BrowserRouter>
Copy the code

🍿 5. Routing components and general components

In the previous section, we used the components Home and About as normal components. We wrote them under the Components folder in the SRC directory. However, we found that they are a little different from normal components. When we introduce them we refer to them in the form of tags. But as we can see above, when we refer to it as a route, we refer to it through {Home}.

From this point we can assume that there is a difference between a generic component and a routing component

First of all, they’re written differently

General component:
Route component:

In order to standardize our writing, routing components are placed in the Pages folder and routing components are placed in components

And the most important thing is that they are receiving different props. In a normal component, if we don’t pass it, we don’t receive a value. For the routing component, it receives three fixed properties history, Location, and match

🍛 6. NavLink label

The NavLink tag is the same as the Link tag, but it is more powerful than Link.

In the previous demo, you may have noticed that the button clicked was not highlighted. Normally, we would have done this by adding an active class to the label

The NavLink tag helps us do just that

When we select a NavLink tag, we automatically add an active attribute to the class

<NavLink className="list-group-item" to="/about">About</NavLink>
Copy the code

The NavLink tag is the default to add the Active class. We can also change it by adding an attribute activeClassName to the tag

For example, activeClassName=” AAA “when the NavLink is triggered, an AAA class is automatically added

🥩 7. NavLink encapsulation

In the NavLink tag above, we can find that we need to write the style name or activeClassName repeatedly each time, which is not a good situation, the code is too redundant. Can’t we figure out a way to encapsulate them?

We can use the MyNavLink component to encapsulate NavLink

First we need to create a new MyNavLink component

Return a structure

<NavLink className="list-group-item"{... this.props} />Copy the code

First, it’s very important that everything we write in the body of the tag becomes a children property, so everything we write in the body of the tag when we call MyNavLink becomes part of the props so that we can implement it

And then when we call it, we just write

<MyNavLink to="/home">home</MyNavLink>
Copy the code

Can achieve the same effect

There you have it!

Thank you very much for reading, welcome to put forward your opinion, if you have any questions, please point out, thank you! 🎈

Welfare moment

To reward his fans, the author has successfully applied for two nuggets of gold badges, which will be given to two lucky winners in the comments section

Rules of engagement: Please give me a little advice on React learning

Rule of extraction: one suggestion I find most helpful will be selected from the comments section, and another will be selected at random from those who meet the requirements

Welcome to join us