Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

Do I need to install both React Router and React Router dom?

@snAtchnAren It's not mandatory. You should never need the "react-router" package if you've already installed "react-router-dom".

Which Router is best for React JS?

React Router is the most popular library for implementing routing for React apps.

Should you use React Router?

Is React Router necessary? React router can be an overkill for certain projects where all you need is basic navigation and routing functionalities. In that context, React Router is not necessary at all.

Can I use React Router dom in next JS?

In React JS, we would install a package called react-router-dom to implement routing inside the application. But Next JS has its own inbuilt router from the next/link , with which we can navigate between the pages. Before using the next/link , we need to set up the different pages/routes inside the pages folder.


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


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

  • <BrowserRouter> which is <Router history={browserNativeHistoryApiWrapper}/>

    proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

  • 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

    proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js


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


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)