The difference between react-router and react-router-dom

April 20, 2023 1727hotness 0likes 0comments
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.
InterServer Web Hosting and VPS

Aaron

Hello, my name is Aaron and I am a freelance front-end developer

Comments