At present, in the development of various web applications, the routing system has always been an indispensable part of the project. However, in the era when frameworks continue to emerge, routing systems have also emerged, such as Backbone. When we use the react framework to develop web applications, we will inevitably use react-router for the routing system.
If you haven't touched react-router before, but instead just used the Backbone router or director just mentioned, you will be surprised by this declarative way of writing. However, it is reasonable to think about it, after all, it only serves the React framework, and it is understandable to introduce its features. Take a closer look and you will find:
Router and Route are both react components. Its history object is the core of the entire routing system. It exposes many properties and methods for use in the routing system;
The path attribute of Route represents the path corresponding to the routing component, which can be an absolute or relative path, and the relative path can be inherited;
Redirect is a redirection component with two attributes from and to;
Route's onEnter hook will be used to intercept operations before rendering the components of the object, such as verifying permissions;
In Route, you can use component to specify a single component, or use components to specify multiple component sets;
param is passed by /:param, which is consistent with express and ruby on rails and conforms to the RestFul specification;
Each component declared in Route (such as SignIn) will be passed in some props before rendering, mainly including:
The history object, which provides many useful methods that can be used in the routing system, such as the history.replaceState just used to replace the current URL, and the replaced URL will be deleted in the browser history. The first parameter of the function is the state object, and the second is the path;
The location object, which can be simply regarded as the object representation of the URL, here is location.state, where the meaning of state is the same as the state object in HTML5 history.pushState API. Each URL corresponds to a state object. You can store data in the object, but this data does not appear in the URL. In fact, the data is stored in sessionStorage;
In fact, the two objects just mentioned exist in the context of the routing component at the same time, and you can also get these two objects in the child components of the component through React's context API.
PS: The react-router explained in this article is from 2.x to 3.x. For example, the latest 4.x version is not compatible, but because the official maintains several versions at the same time, it can still be used in actual projects. of.
a. Front-end learning training, video tutorials, learning routes, add prestige kaixin666haoyun to contact me! a/