Reading source code is to improve programming skills and a deep understanding of the principle of the only way, we strongly recommend that the first time to learn the source code with front-end routing to start. Because the routing component can be said to be closely related to our development project, and its source code structure is very clear, can be said to be a good example of the source code.

React Specifies the relationship between routing libraries

React-router-dom and the react-router library

History can be understood as the core of the react-Router and the core of the entire routing principle, which integrates the principles and methods of low-level routing implementation such as popState() and history.pushState().

React-router can be understood as the core of react-router-DOM, which encapsulates router, Route, Switch and other core components, realizing core functions from routing changes to component updates. In our project, we simply introduced the React-router-dom once and for all

React-router-dom adds Link components for jump, BrowserRouter in history mode, HashRouter in hash mode, and so on. BrowserRouter and HashRouter simply use the createBrowserHistory and createHashHistory methods in the history library.

Realize the principle of

The principle of single page application routing is as follows: switch URL → monitor URL change → render different page components. The main modes are history mode and hash mode.

The history mode

(1).history. pushState(state,title,path), state → a state object associated with the specified url that will be passed a callback function when the popState event is triggered. If not required, you can fill in null. Title: The title of the new page, but all browsers currently ignore this value and can be null. Path: the new url must be in the same domain as the current page. The browser’s address bar will display the address. (2).history. replaceState(state,title,path) is the same as pushState, this method will modify the current history object record, history.length length does not change.

Window. AddEventListener (‘ popState ‘,function(e)){XXX} The PopState event is triggered when the history object of the same document changes. History. pushState allows the browser address to change without refreshing the page. Note: Using history.pushState() or history.replacEstate () will not trigger the popState event. The popState event is only triggered when the browser does something, such as clicking the back or forward button or calling the history.back(), history.forward(), or history.go() methods.

Hash pattern

1. Change the route Window.location. hash: Obtains and sets the hash value using the window.location.hash property.

Window. addEventListener(‘hashchange’,function(e){XXX})

Source code analysis

Copy the code


The history library provides core apis, such as listening for routes, methods for changing routes, and saving route state. The React-Router provides a route rendering component, a unique route matching component, and a redirection component.

Process analysis

When the address bar changes the URL, what happens to the updated rendering of the component? Taking history as an example, when the URL changes, the history call event is first triggered to listen for the popState event, the callback function handlePopState is triggered, the setState method under History is triggered, and a new Location object is generated. The Router component is then notified to update the location and pass it through the context context. The Switch matches the matching Route component rendering through the passed update flow. Finally, the Route component extracts the context content and passes it to the rendering page for rendering updates. When we call the history.push method, we switch routes and update the rendering process of the component. When we call history.push, we call history’s push method first, change the current URL with history.pushState, and then fire setState under History, and the next steps are exactly the same as above.

Record the record!