Recently there has been training orgnaization to add my micro letter and QQ to have abuse to me, I give free video, how did you train orgnaization, the market is so big, do you make money to return prohibit somebody else to make freely? I’m going to do three free videos a week for 1,000.
React Router is a powerful routing library built on top of React that allows you to quickly add views and data streams to your application while keeping pages and urls in sync. This is the official explanation, and while it’s enough to explain the React Router, I don’t think there’s enough emphasis on the plugin. As far as I know from my work experience, the React Router is needed in all projects of React technology stack (WEB and Native). It’s what allows you to build complex applications, it’s what allows you to have layers in your applications. If there was no React Router, we would use switch… “Case” to render judgments, which is cumbersome and not available; But with the React Router, things are much simpler.
Before learning this article, I assume that you have already learned the first two articles, so I will not explain a lot of the basic content.
- React16 Free Video Tutorial (28 episodes)
- Redux Free Video Tutorials (24 episodes)
If you haven’t learned the basics yet, I suggest you study these two video tutorials first. If you are certified, you should finish them in a weekend (two days), and then you will come back to this article with a lot of ease.
If you are learning React, you can join the QQ group 159579268 to discuss React with your friends.
P00: React Router Video collection list
01. Install the React Router and set up the infrastructure
02. Use ReactRouter as you would a regular Web page
03.ReactRouter Dynamic value transfer -1
04.ReactRouter Dynamic Value transfer -2
05.ReactRouter -Redirect use
06. Example -ReactRouter nested from -1
07. Example -ReactRouter nested from -2
08. Instance -ReactRouter nested from -3
09. Dynamically obtain routes in the background for configuration
P01: Install the React Router and set up the infrastructure
In this lesson, we will install the React Router and use it as a simple example.
withcreact-react-appScaffolding initialization project
1. If you don’t have a scaffolding tool, you’ll need to:
npm install -g create-react-app
Copy the codeIf you have taken the previous lesson, this step is usually completed and can be omitted. -g indicates the global installation of the system.
2. Create projects directly using scaffolding tools
D: // Go to drive D mkdir ReactRouterDemo // Create the ReactRouterDemo foldercdReactRouterDemo // go to create-react-app demo01 // create the React project with scaffoldingcdDemo01 // After the project is created, enter the project directory NPM start // to preview the projectCopy the codeNow that the project is done, let’s delete unnecessary files and keep the code structure minimal. Delete all files in SRC except index.js, and empty all files in index.js.
usenpmInstall the React the Router
Then you can open the project in your code editing tool, I’m using VSCode here, it doesn’t really matter, but if you’re new to this, I suggest you use the same editor as I did so that you can make sure it’s the same as in the video. Press CTRL +~ to open the demo01 terminal and install the React Router on the terminal using NPM.
npm install --save react-router-dom
Copy the codeAfter the installation, you can check the installed version in package.json. Currently, I have installed 5.0.1. The version may be different when you learn it, and some APIS may not be applicable.
Write one of the simplest routing procedures
First we’ll rewrite the index.js code in the SRC file directory. Change to the following code, which is explained in the video:
import React from 'react';
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'
ReactDOM.render(<AppRouter/>.document.getElementById('root'))
Copy the codeThe AppRouter component is not currently available, so we can create an AppRouter. Js file in the SRC directory and write the following code.
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function Index() {
return <h2>JSPang.com</h2>;
}
function List() {
return <h2>List-Page</h2>;
}
function AppRouter() {
return(< the Router > < ul > < li > < Link to = "/" > home page < / Link > < / li > < li > < Link to = "/ list/" > list < / Link > < / li > < / ul > < the Route path ="/" exact component={Index} /> <Route path="/list/" component={List} /> </Router> ); } export default AppRouter;Copy the codeAt this point, you can go to the browser to see the effect, and if everything works, you can jump to the page. But this is just the simplest page jump, so that’s all we have to do in the first video.
P02: Use ReactRouter as you would a regular web page
After learning in the last section, some friends said that this was different from what they saw in their daily work. In reality, each page is a complete stateful component, and then we jump to it, instead of multiple stateless components written in a page. So I feel that it is not applicable, so in this class, I will make the case of last class into our work, or more suitable for the actual development. We’ll talk a little bit about exact matching.
Writing the Index component
Create a folder in the/SRC directory, I’ll call it Pages (you can call it anything), and create a component file called index.js. Here we write the mode in full installation work, but there is no business logic and the UI is made quite simple. The code is as follows:
import React, { Component } from 'react';
class Index extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( <h2>JSPang.com</h2>); }}export default Index;
Copy the codeWriting a List component
After writing the Index component, continue writing the List component. This component is basically the same as Index. The code is as follows:
import React, { Component } from 'react';
class List extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( <h2>List Page</h2>); }}export default List;
Copy the codeModify theAppRouter.jsfile
After the two components are made, we import it into the routing configuration file, and then configure the route. The code is as follows:
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/List'
function AppRouter() {
return(< the Router > < ul > < li > < Link to = "/" > home page < / Link > < / li > < li > < Link to = "/ list/" > list < / Link > < / li > < / ul > < the Route path ="/" exact component={Index} /> <Route path="/list/" component={List} /> </Router> ); } export default AppRouter;Copy the codeNow it looks pretty much like what we’re actually working on, and it looks pretty much like normal HTML pages we write.
exactThe exact match
This is also a question asked by a friend of mine. What exactly is accurate matching? You can jump only if your path information matches completely, not if it matches only part of it.
For example, if we remove the Index exact match, you’ll find that whatever you type in the address bar will match the Index component, which is not what we want.
<Route path="/" component={Index} />
Copy the codeSo we add exact matching. You can try accessing the List component again to learn more about exact matching.
This class is mainly to solve the questions of small partners. The first class will indeed increase the cost of learning for some students, which is also an improvement of some shortcomings in the lecture.
P03: ReactRouter dynamic transmission -1
Now that we have solved the problem of link skipping, imagine a scenario where a list of many articles and clicking on any link can open the detailed article content precisely by passing the article ID, and then retrieving the article content accurately in the background. The ID value passed to the detail page is different each time, so the route needs to be capable of dynamic value transfer.
Set to allow dynamic value transfer on Route
This setting starts with:, followed by the name of the key you passed. Let’s look at a simple example.
<Route path="/list/:id" component={List} />
Copy the codeWhen you look at the code, it’s easy to add :id to path. This sets the rule that allows the value to be passed.
Link to pass values
After setting the rule, you can set the value on the Link. Now you can set the value of the passed ID. You can write the value directly instead of adding the ID.
<li><Link to="/list/123">Copy the codeNow you can transfer values. For your convenience, here is the entire approuter.js code.
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/List'
function AppRouter() {
return(< the Router > < ul > < li > < Link to = "/" > home page < / Link > < / li > < li > < Link to = "/ list / 123" > list < / Link > < / li > < / ul > < the Route path = "/" exact component={Index} /> <Route path="/list/:id" component={List} /> </Router> ); } export default AppRouter;Copy the codeReceive and display the passed values on the List component
When a component receives a value passed to it, it can do so in the declaration cycle componentDidMount, passing the value in this.props. Match. We can print it out first. Here’s the code.
import React, { Component } from 'react';
class List extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( <h2>List Page</h2> );
}
//- key code ---------start
componentDidMount(){
console.log(this.props.match)
}
//- key Emma ---------end
}
export default List;
Copy the codeYou can then see the printed object in the browser console, which consists of three parts:
- Patch: user-defined routing rule. It can be clearly seen that the parameter of origin ID can be used.
- Url: The actual access path, where it is clear what parameters are passed.
- Params: Parameters passed in,
keyandvalueValue.
Once you understand the object properties in match, you can easily get the ID values passed in. The code is as follows:
import React, { Component } from 'react';
class List extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( <h2>List Page->{this.state.id}</h2> );
}
componentDidMount(){
// console.log(this.props.match.params.id)
let tempId=this.props.match.params.id
this.setState({id:tempId })
}
}
export default List;
Copy the codeSo you have dynamic routing, but it’s important to note that if you don’t pass anything, you’re not going to be able to match the route. In the next section we’ll make a dynamic list more visually and then pass values dynamically. This lecture is kind of a theoretical foundation.
P04: ReactRouter dynamic transmission -2
In the last lesson, the dynamic value transfer was not flexible, but I talked about a lot of dynamic value transfer theories, which gave me a preliminary understanding of the React Router dynamic value transfer. This lesson visualizes a dynamic data list and passes the values from the list to the detail page. In fact, this lecture has already been covered last time, so it’s a little exercise. Again, you can’t learn anything by watching the video, you can only learn it by watching the video and typing it once, and I really hope you can learn it here.
Simulates a list array
We can now simulate a list array in the Index component, which is what we dynamically fetch from the background, and then include the cid and title of the article in the array. This is set directly at state initialization as follows:
constructor(props) {
super(props);
this.state = {
list:[
{cid:123.title:'Tech-fat Personal Blog -1'},
{cid:456.title:'Tech-fat Personal Blog -2'},
{cid:789.title:'Tech-fat Personal Blog -3'}}},]Copy the codeOnce you have the list array, modify the UI to perform an efficient traversal, with the Render code as follows.
render() {
return (
<ul>
{
this.state.list.map((item,index)=>{
return (
<li key={index}> {item.title} </li>)})}</ul>)}Copy the codeNow that the list is displayed in the Index component, you can configure . Before configuring , you need to import the Link component.
import { Link } from "react-router-dom";
Copy the codeAfter introduction, it can be used to jump directly, but it needs to pay attention to the form of {}, that is, to parse the content inside into JS form, so that the value can be passed smoothly.
render() {
return (
<ul>
{
this.state.list.map((item,index)=>{
return (
<li key={index}>
<Link to={'/list/ '+item.uid} > {item.title}</Link>
</li>)})}</ul>)}Copy the codeSo far, we have passed values to the detail page much like the list in our project. To make it easier for you to learn, give all the code for index.js.
import React, { Component } from 'react';
import { Link } from "react-router-dom";
class Index extends Component {
constructor(props) {
super(props);
this.state = {
list:[
{uid:123.title:'Tech-fat Personal Blog -1'},
{uid:456.title:'Tech-fat Personal Blog -2'},
{uid:789.title:'Tech-fat Personal Blog -3'},
]
}
}
render() {
return (
<ul>
{
this.state.list.map((item,index)=>{
return (
<li key={index}>
<Link to={'/list/ '+item.uid} > {item.title}</Link>
</li>)})}</ul>)}}export default Index;
Copy the codeAfter learning the React Router, you must have a basic understanding of the React Router. The following sections will be a bit more difficult, so you should learn the four sections well and practice them well first. Let’s go down.
P05: ReactRouter redirection-redirect usage
When I was writing this article, I read some related articles about React Router Redirect, which were very complicated. In fact, I think writing an introductory article is not to show technology, but to let others see it and make it, and I can further study it by myself in the future. It’s a good article if you can do all three. I think Redirect, you just have to understand the two basic things.
- Tabbed redirection: use
<Redirect>Tag is recommended when the business logic is not complex. - Programmatic redirection: This is a programmatic approach, commonly used in business logic, such as successful login challenges to the member center page.
One important difference between a redirect and a jump is that a jump can use the browser’s back button to go back to the previous level, while a redirect cannot.
Tabbed redirection
This is usually used in less complicated business logic, like if we go into the Index component, and then the Index component, redirects directly to the Home component. Let’s take a look at how this might be implemented in conjunction with this scenario.
First create a home.js page, this page I still use the way of quick generation to write, the code is as follows.
import React, { Component } from 'react';
class Home extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( <h2>I'm the Home page</h2>); }}export default Home;
Copy the codeThis page is very simple, just a normal stateful component.
Add a
configuration to approuter.js and include the Home component in the configuration.
import Home from './Pages/Home'
<Route path="/home/" component={Home} />
Copy the codeThen open the index.js file and Redirect from the Index component to the Home component. Redirect is introduced first.
import { Link , Redirect } from "react-router-dom";
Copy the codeOnce Redirect is introduced, use it directly in the render function.
<Redirect to="/home/" />
Copy the codeThe page can now be redirected.
Programmatic redirection
Programmatic redirection is using JS syntax instead of the
For example, add the following redirection code directly to constructor.
this.props.history.push("/home/");
Copy the codeThis will make the jump look the same as above. You can use these two methods of redirection based on your actual needs to make your application more flexible. After class you can try to simulate the user’s login process and try to use a jump like this.
P06: Instance -reactrouter Nested routine from -1
This lesson begins with nested routing, a form of routing that is also common on the Internet. For example, our backstage management system, most of which is by nested routines, to achieve the overall division of the page. Of course, the front-end page will also have a lot of nested by the implementation, such as we often see the nuggets website, there are more nested by (such as the boiling point in the nuggets).
We will take a few lessons to learn how to use nested routines in React Router. This is a small example. We will review our routing knowledge and use it to build complex routing relationships.
Create projects with scaffolding
Create a new project Demo02 and type it directly into VSCode. Initialize the project code with the following command.
create-react-app demo02
Copy the codeThe project is now created, but there are many files that are not needed for the time being. Remove these and keep the code structure minimal. Keep only the index.js file in the/SRC directory, and then delete some useless code in the index.js file.
After the React Router is initialized, use NPM to install the React Router (remember to enter the Demo02 folder).
npm install --save react-router-dom
Copy the codeInitialize the base directory
According to the sketch analysis, it can be guided that there are two levels of relationship, the first level is the major category, the second level is the sub-category. Create a Pages folder under/SRC. Then create two more directories /video and /workPlace in the /Pages directory, and create an approuter.js file in the/SRC directory as the configuration file for the home page and routing. The directory structure is as follows:
- src
|--Pages
|--video
|--workPlace
|--index.js
|--AppRouter.js
Copy the codeOnce built, we wrote approuter.js to give our application a home page and make it run. After the new file can be used to quickly generate code, the basic code to finish.
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import './index.css'
function AppRouter() {
return (
<Router>
<div className="mainDiv">
<div className="leftNav">
<h3>The primary navigation</h3>
<ul>
<li> <Link to="/">Blog's front page</Link> </li>
<li><Link to="">Video tutorial</Link> </li>
<li><Link to="">Workplace skills</Link> </li>
</ul>
</div>
<div className="rightMain">
<Route path="/" exact component={Index} />
</div>
</div>
</Router>
);
}
export default AppRouter;
Copy the codeAfter writing this file and modifying the/SRC /index.js file, I need to introduce AppRouter and Render it.
import React from 'react'
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'
ReactDOM.render(<AppRouter />, document.getElementById('root'));
Copy the codeAt this point, you can type NPM start in the terminal to get the program running, and then go to the browser to view.
Add basic Styles
In the/SRC directory, create a new index.css file and write the following styles.
body{
padding: 0px;
margin: 0px;
}
.mainDiv{
display: flex;
width: 100%;
}
.leftNav{
width: 16%;
background-color: #c0c0c0;
color:# 333;
font-size:24px;
height: 1000px;
padding: 20px;
}
.rightMain{
width: 84%;
height:1000px;
background-color: #fff;
font-size:20px;
}
Copy the codeOnce you’re done, import the CSS file into the approuter.js file and you’ll have some styling. Then go to the browser and check it. If it works, we’ve done it right so far.
P07: Instance -reactrouter nested routine from -2
In this lesson, we are going to take the most important knowledge points and set them into a pattern. Then last class we continued to add our program, the video part of the nested routine by the production. Nesting is simply to set a new layer of routing navigation rules in the sub-page.
writeVideoChild pages in
Before writing the video.js page, we need to create three subfiles under/SRC /Pages/ Video, reactPage.js,Flutter. Js and vue.js, which also represent different Video Pages.
ReactPage. Js components
import React from "react";
function Reactpage(){
return (<h2>I'm on the React page</h2>)}export default Reactpage;
Copy the codeFlutter. Js components
import React from "react";
function Flutter(){
return (<h2>I am the Flutter page</h2>)}export default Flutter;
Copy the codeVue. Js components
import React from "react";
function Vue(){
return (<h2>I am Vue page</h2>)}export default Vue;
Copy the codeThis is equivalent to three pages done, of course, we do is very simple.
writeVideo.jspage
This page is the writing of secondary navigation, which is also the focus of the course.
import React from "react";
import { Route, Link } from "react-router-dom";
import Reactpage from './video/ReactPage'
import Vue from './video/Vue'
import Flutter from './video/Flutter'
function Video(){
return<div> <div className="topNav"> <ul> <li><Link to="/video/ reactPage ">React tutorial </Link></li> <li><Link To = "/ video/vue" > vue tutorial < / Link > < / li > < li > < Link to = "/ video/flutter" > flutter tutorial < / Link > < / li > < / ul > < / div > < div ClassName ="videoContent"> <div><h3> <Route path="/video/ reactPage /" Component ={reactPage} /> <Route path="/video/vue/" component={Vue} /> <Route path="/video/flutter/" component={Flutter} /> </div> </div> ) } export default Video;Copy the codeModify theAppRouter.jsfile
When our Video component is finished, we can import it into the approuter.js file and configure the corresponding route. For your convenience, the entire code is presented here, with notes where changes are reused.
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
//-- key code ------------start
import Video from './Pages/Video'
//-- key code ------------end
import './index.css'
function AppRouter() {
return(<Router> <div className="mainDiv"> <div className="leftNav"> <h3> <ul> <li> <Link to="/"> {/ * key code -- -- -- -- -- -- -- -- -- -- -- -- -- start * /} < li > < Link to = "/ video/" > video tutorial < / Link > < / li > {/ * - key code -- -- -- -- -- -- -- -- -- -- -- -- end * /} < li > < Link To =""> </Link> </li> </ul> </div> <div className="rightMain"> <Route path="/" exact Component ={Index} /> {/ * key code -- -- -- -- -- -- -- -- -- -- -- -- -- start * /} < the Route path = "/ video/component = {video}" / > {/ * - key code -- -- -- -- -- -- -- -- -- -- -- -- end * /} < / div > < / div > </Router> ); } export default AppRouter;Copy the codeAt this point, you can go to the browser to see the effect, of course, there is no CSS style, so it is not very nice.
.topNav{
height:50px ;
background-color: #cfdefd;
}
.topNav ul{
display: flex;
margin: 0px;
padding: 0px;
}
.topNav li{
padding: 10px;
text-align: center;
list-style: none;
}
.videoContent{
padding:20px;
}
Copy the codeThis way we implement the React Router nesting function, which looks pretty simple. Hopefully you can, and next time we’re going to do a little bit more of this, write it out.
P08: Instance -reactrouter nested routine by -3
If you are already familiar with this tutorial, you can skip this tutorial and move on to the next one. But if you want to complete this little example, you can follow this tutorial.
Write the third level child page
Make only two sub-pages in “Career Skills”, “Programmer salary Tips” and “Programmer Morning Tips”. In the/SRC /Pages/workPlace directory, create two new files money.js and getup.js, and write the code.
Money.js
import React from "react";
function Money(){
return (<h2>Programmer pay secret details</h2>)}export default Money;
Copy the codeGetup.js
import React from "react";
function Getup(){
return (<h2>Programmer early walkthrough details</h2>)}export default Getup;
Copy the codeWrite secondary subpagesWorkplace
Create a Workplace. Js page under the/SRC /Pages folder as a secondary child page.
import React from "react";
import { Route, Link } from "react-router-dom";
import Money from './workPlace/Money'
import Getup from './workPlace/Getup'
function WorkPlace(){
return<div> <div className="topNav"> <ul> <li><Link to="/workplace/Moeny"> </Link></li> <li><Link To ="/workplace/Getup"> Programmer Early start </Link></li> </div> <div className="videoContent"> <div><h3> workplace soft skills </h3></div> <Route path="/workplace/Moeny/" component={Money} /> <Route path="/workplace/Getup/" component={Getup} /> </div> </div> ) } export default WorkPlace;Copy the codeOnce this component is complete, you can go to the main route and configure the secondary page.
Configure the main routeAppRouter.js
This I will directly give the file code, the idea is to introduce the Route to configure Workplace, then configure the Route
, and finally write the Link
.
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'
function AppRouter() {
return(<Router> <div className="mainDiv"> <div className="leftNav"> <h3> <ul> <li> <Link to="/"> < li > < Link to = "/ video/" > video tutorial < / Link > < / li > < li > < Link to ="/workplace "> workplace skills < / Link > < / li > < / ul > < / div > < div className="rightMain"> <Route path="/" exact component={Index} /> <Route path="/video/" component={Video} /> <Route path="/workplace/" component={Workplace} /> </div> </div> </Router> ); } export default AppRouter;Copy the codeAfter completion, you can view the effect in the browser. If it can be displayed normally, everything is ok. Our small case is completed. In fact, knowledge is not much, mainly for a case practice. The next lesson will show you how to dynamically obtain and configure routing addresses.
P09: Dynamically obtains routes in the background for configuration
With the React Router case done, we have a better understanding of the React Router. Sometimes make a background management system, the menu is not written dead, but through the background interface, at this time we need to write our route according to the background interface. This class simulates the background to obtain routing configuration, and write dynamic routing configuration methods.
Simulate JSON data obtained in the background
We now have the approuter.js file where the simulation takes the JSON string from the background and converts it to an object (we’re just simulating, so we don’t really ask for the data remotely). The simulated code is as follows:
let routeConfig =[
{path:'/'.title:'Blog Home'.exact:true.component:Index},
{path:'/video/'.title:'Video Tutorial'.exact:false.component:Video},
{path:'/workplace/'.title:'Career Skills'.exact:false.component:Workplace}
]
Copy the codeLoop out the Link area
In this case, the first level of navigation can not be written dead, need to loop out the data obtained. Just use the Map loop. The code is as follows:
<ul>
{
routeConfig.map((item,index)=>{
return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
})
}
</ul>
Copy the codeAt this point you can loop out all the Link tags.
The loop outlet is configured
Loop the Route configuration through the logic above. The code is as follows:
{
routeConfig.map((item,index) = >{
return (<Route key={index} exact={item.exact} path={item.path} component={item.component} />)})}Copy the codeFor your convenience, here is the full code of approuter.js.
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'
function AppRouter() {
let routeConfig =[
{path:'/'.title:'Blog Home'.exact:true.component:Index},
{path:'/video/'.title:'Video Tutorial'.exact:false.component:Video},
{path:'/workplace/'.title:'Career Skills'.exact:false.component:Workplace}
]
return (
<Router>
<div className="mainDiv">
<div className="leftNav">
<h3>The primary navigation</h3>
<ul>
{
routeConfig.map((item,index)=>{
return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)})}</ul>
</div>
<div className="rightMain">
{
routeConfig.map((item,index)=>{
return (<Route key={index} exact={item.exact} path={item.path} component={item.component} />)})}</div>
</div>
</Router>
);
}
export default AppRouter;
Copy the codeAt this point, routing can be dynamically displayed and configured in the background, but this should be considered by the architecture layer. If you’re new to React, you probably don’t use it much. But you can use this pattern to design your static routing to increase the extensibility of your application. Hopefully you will get this skill in this class and be able to use it in your work as much as possible.
There are many ways to use the React-Router that I haven’t covered yet. In the future, I will give you an example of how to use the react-Router. I hope you can keep up with this blog (jspang.com) for three videos a week.