Should I use react-router-dom or react-router?

Should I use react-router-dom or react-router?

For building web applications with React, react-router-dom is the appropriate choice.

react-router-dom is built on top of react-router and provides the necessary components and functionalities specifically designed for web browsers, such as:

  1. BrowserRouter: For managing browser history using clean URLs.
  2. Link and NavLink: Components for creating navigation links that prevent full page reloads.
  3. DOM-aware components: Components that interact with the browser’s Document Object Model (DOM).

While react-router contains the core routing logic, react-router-dom extends it with the features required for web-based routing. When you install react-router-dom, react-router is automatically installed as a dependency.

Therefore, for web applications, you should import components and hooks from react-router-dom. If you are working with React Native, react-router-native would be the equivalent package.

One of the projects that I worked on

One of the projects that I worked on used to have a dependency on react-router. Changing it to react-router-dom made it easier to set-up code and test cases for it.

See

  1. https://stackoverflow.com/questions/42684809/react-router-vs-react-router-dom-when-to-use-one-or-the-other
  2. https://github.com/remix-run/react-router/issues/4648
  3. https://www.reddit.com/r/reactjs/comments/1hj4bz4/what_is_the_difference_between_reactrouter_and/

Links to this note