chulian
chulian

Reputation: 4117

react-router vs react-router-dom, when to use one or the other?

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.

Upvotes: 322

Views: 153540

Answers (6)

Boda
Boda

Reputation: 429

It's December 2024, It looks now we should use react-router directly after v7 release.

react-router-dom npm page now reads:

This package simply re-exports everything from react-router to smooth the upgrade path for v6 applications. Once upgraded you can change all of your imports and remove it from your dependencies:

-import { Routes } from "react-router-dom"
+import { Routes } from "react-router"

Also, react-router installation guide is now installing it directly, not react-router-dom

npm i react-router

and importing BrowserRouter from react-router directly.

Update: react-router v7 can be used as both a library or a framework, as per its docs. Also, Remix users are now can use react-router v7 as if it's Remix v3, read on that here.

React Router v7 brings everything you love about Remix back into React Router proper. We encourage all Remix v2 users to upgrade to React Router v7.

In Summery: starting v7, react-router can be used in its own, no need to react-router-dom anymore. It can also be used as a framework (with server rendering and to alike), not just a library for routing.

Exciting times.

Upvotes: 8

Imran
Imran

Reputation: 530

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

Upvotes: 12

Sooraj
Sooraj

Reputation: 10577

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)

Upvotes: 17

Oleksandr Golovatyi
Oleksandr Golovatyi

Reputation: 1110

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?).

Upvotes: 35

Atombit
Atombit

Reputation: 1017

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

Upvotes: 64

Tyler McGinnis
Tyler McGinnis

Reputation: 35286

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

Upvotes: 340

Related Questions