309

Both have Route, Link, etc. When to use one or the other? I'm really confused on where to use each one. Server side? Client side?

https://reacttraining.com/react-router/

In some examples you need to pass the history, in others not. What to do?

<Router history={browserHistory}>

vs

<Router>

It's really confusing on when to use one or the other, any help appreciated.

3

5 Answers 5

335

react-router contains all the common components between react-router-dom and react-router-native. When should you use one over the other? If you're on the web then react-router-dom should have everything you need as it also exports the common components you'll need. If you're using React Native, react-router-native should have everything you need for the same reason. So you'll probably never have to import anything directly from react-router. As far as when you use

<Router history={browserHistory}>

vs

<Router>

In RRv4 you won't need to pass down browserHistory, that was just for previous versions of the router.

If you're still confused, you can check out the details on each package here

4
  • 5
    shall we remove react-router from project or it affects react-router-dom?? is that react-router package is mandatory to work with react-router-dom?
    – Yogi
    Commented Jun 22, 2017 at 12:28
  • 11
    @snAtchnAren It's not mandatory. You should never need the "react-router" package if you've already installed "react-router-dom". Commented Jun 22, 2017 at 17:04
  • 5
    If I use react-router-dom over react-router, will it decrease the size of my bundle?
    – Vrishank
    Commented May 23, 2018 at 9:44
  • Please check out the link for an additional reference - github.com/remix-run/react-router/tree/main/packages/… . (readme.md) Commented Dec 10, 2023 at 16:23
65

react-router-dom is a react-router plus:

1
  • 3
    The top answer here "react-router contains all the common components between react-router-dom and react-router-native." and then this answer "react-router-dom is a react-router plus:" so which is it? I'm no expert but it seems like it's still confusing for everyone. When I try Redirect with RR-dom my app fails to compile, in contradiction to the answers here. I need them both in a web-app? Commented May 26, 2023 at 9:13
35

Just use react-router-dom - react-router-dom re-exports all of react-router. The link on GitHub answer (what's the diff between react-router-dom & react-router?).

17

In v4, react-router exports the core components and functions. react-router-dom exports DOM-aware components, like <Link> ( which renders <a>) and (which interacts with the browser's window.history ).

react-router-dom re-exports all of react-router's exports, so you only need to import from react-router-dom in your project.

(Source: GitHub)

2
  • 2
    but do you need to npm install both react-router and react-router-dom separately?
    – joedotnot
    Commented Nov 25, 2019 at 14:43
  • @joedotnot no. react-router-dom have everything from react-router. See example here. reactrouter.com/web/example/basic
    – Imran
    Commented Oct 14, 2021 at 7:27
12

Found this in the Github.

Note: This package provides the core routing functionality for React Router, but you might not want to install it directly. If you are writing an application that will run in the browser, you should instead install react-router-dom. Similarly, if you are writing a React Native application, you should instead install react-router-native. Both of those will install react-router as a dependency.

Source: https://github.com/remix-run/react-router/tree/main/packages/react-router#readme

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.