React Router is a routing library for React applications that provides an easy way to match URL to components. React Router implements the following main concepts: Router: it provides the basic routing capabilities of the application. Routes: it defines the mapping between URL and components. Link: it provides a convenient way to navigate through the application. Switch: it is used to ensure that only one route can match the current URL. createBrowserHistory: this is used to create an instance of HTML5 History API. next, we will delve into the implementation principle of React Router. We will first discuss the implementation of Router components, then discuss the implementation of Routes components, and finally discuss the implementation of Link components. implementation of Router components The Router component is the core component of the React Router library, which provides the basic routing capabilities of the application. The following is the simplified version of the Router component implementation code: const Router = ({ children }) => { const [location, setLocation] = useState(window.location.pathname); useEffect(() => { const handlePopState = () => setLocation(window.location.pathname); window.addEventListener('popstate', handlePopState); return () => window.removeEventListener('popstate', handlePopState); }, []); return <RouterContext.Provider value={{ location }}>{children}</RouterContext.Provider>; }; in the above code, we first define a Router component. It accepts a children attribute, which is the root component of our application. Then we use useState Hook to create a state variable named location . It will be used to track the current URL. We will update this state variable using the setLocation function. next, we use useEffect Hook to register a function that listens for popstate…

import { Switch, Route, Router } from 'react-router'; import { Swtich, Route, BrowserRouter, HashHistory, Link } from 'react-router-dom'; 1, api React-router： provides the core api of the route. Such as Router, Route, Switch, etc., but does not provide api; for routing redirection for dom operations React-router-dom： provides api such as BrowserRouter, Route, Link, etc., which can trigger events to control routing through dom actions. Link component, which renders an a tag; BrowserRouter, which uses pushState and popState events to build routes, and HashRouter components, which use hash and hashchange events to build routes. 2, dynamic route hopping React-router： this.props.history.push ('/ path') above router4.0 to jump; this.props.router.push ('/ path') above router3.0 to jump; React-router-dom： use this.props.history.push ('/ path') to jump directly 3, differences in use react-router-dom extends the api of operable dom on the basis of react-router. both Swtich and Route import the corresponding components from react-router and re-export them without any special treatment. there is a dependency on react-router in the package.json dependency in react-router-dom, so there is no need for npm to install react-router. you can install react-router-dom directly with npm and use its api.