react-router vs react-router-dom, when to use one or the other?
ReactjsReact RouterReactjs Problem Overview
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.
Reactjs Solutions
Solution 1 - Reactjs
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
Solution 2 - Reactjs
react-router-dom is a react-router
plus:
-
<BrowserRouter>
which is<Router history={browserNativeHistoryApiWrapper}/>
-
some Link improvements for browser
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
-
and with
<NavLink>
— wrapper that knows if it's "active" or not
Solution 3 - Reactjs
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
?).
Solution 4 - Reactjs
> In v4, react-router exports the core components and functions.
> react-router-dom exports DOM-aware components, like <Link>
( which
> renders <a>
) and react-router-dom
re-exports all of react-router's exports, so you
> only need to import from react-router-dom
in your project.
Solution 5 - Reactjs
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