connected-react-router vs mobx-react-router vs react-router vs react-router-dom
React Routing Libraries
Search packages..
connected-react-routermobx-react-routerreact-routerreact-router-domSimilar Packages:

React Routing Libraries

Routing libraries in React are essential for managing navigation and rendering components based on the current URL. They provide a way to create single-page applications (SPAs) that can dynamically change the content displayed without requiring a full page reload. These libraries help developers define routes, manage browser history, and handle navigation events, enhancing user experience by making applications feel more responsive and interactive. Each library has its own approach and features, catering to different needs in application architecture and state management.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
connected-react-router04,700444 kB176-MIT
mobx-react-router043720.9 kB6a year agoMIT
react-router056,2684.18 MB1504 days agoMIT
react-router-dom056,2685.46 kB1504 days agoMIT

Feature Comparison: connected-react-router vs mobx-react-router vs react-router vs react-router-dom

Integration with State Management

  • connected-react-router:

    This package tightly integrates with Redux, allowing you to manage routing state within your Redux store. It provides actions and reducers that help synchronize the router state with your application's state, making it ideal for applications that heavily rely on Redux for state management.

  • mobx-react-router:

    Mobx-react-router integrates seamlessly with MobX, allowing you to manage routing as part of your observable state. This reactive approach simplifies the handling of route changes and state updates, making it easier to build applications that respond to user interactions without boilerplate code.

  • react-router:

    React-router is agnostic to state management solutions, allowing you to use it with any state management library or even without one. It provides a flexible API for defining routes and handling navigation, making it a versatile choice for various applications.

  • react-router-dom:

    React-router-dom is specifically designed for web applications, complementing react-router with additional components and hooks that facilitate DOM manipulation and navigation. It allows for easy integration with any state management solution you choose.

Routing Features

  • connected-react-router:

    Offers features like route transitions and history management that are directly tied to Redux actions. This allows for a more predictable routing experience, especially in complex applications where state management is crucial.

  • mobx-react-router:

    Provides a simple and reactive way to define routes and handle navigation. It leverages MobX's observables to automatically update components when the route changes, resulting in a more intuitive development experience.

  • react-router:

    Includes advanced routing features such as nested routes, route parameters, and lazy loading of components. This flexibility allows developers to create complex routing structures that are easy to manage and maintain.

  • react-router-dom:

    Enhances react-router with web-specific features like browser history management, link components, and route matching, making it easier to build user-friendly web applications.

Learning Curve

  • connected-react-router:

    The learning curve is moderate, especially if you are already familiar with Redux. Understanding how to synchronize routing with Redux actions and state may take some time for new users.

  • mobx-react-router:

    This library has a gentle learning curve for those familiar with MobX. Its reactive nature simplifies routing logic, but understanding MobX concepts is essential for effective use.

  • react-router:

    React-router is relatively easy to learn, especially for those who have experience with React. Its documentation is comprehensive, making it accessible for beginners and experienced developers alike.

  • react-router-dom:

    Similar to react-router, react-router-dom is straightforward to learn. It builds on the concepts of react-router while adding web-specific components, making it intuitive for web developers.

Performance

  • connected-react-router:

    Performance is generally good, but it may introduce overhead due to the synchronization with Redux. Properly managing state updates and routing actions can help maintain optimal performance.

  • mobx-react-router:

    Offers excellent performance due to MobX's efficient change detection. The reactive nature ensures that only components that depend on the current route are re-rendered, minimizing unnecessary updates.

  • react-router:

    Performance is solid, but can vary based on how routes are structured and components are rendered. Utilizing features like code splitting can significantly enhance performance in larger applications.

  • react-router-dom:

    Similar to react-router, it provides good performance for web applications. However, developers should be mindful of how they manage component rendering and routing to avoid performance bottlenecks.

Community and Support

  • connected-react-router:

    Has a smaller community compared to react-router but benefits from the larger Redux community. Support can be found through Redux-related resources and forums.

  • mobx-react-router:

    The community is smaller, as MobX is less commonly used than Redux. However, MobX's community is active, and resources are available for those who choose this approach.

  • react-router:

    One of the most popular routing libraries for React, it has a large community and extensive documentation. Many resources, tutorials, and third-party libraries are available to assist developers.

  • react-router-dom:

    Being part of the react-router ecosystem, it enjoys strong community support and a wealth of resources. Its popularity ensures that developers can find help and examples easily.

How to Choose: connected-react-router vs mobx-react-router vs react-router vs react-router-dom

  • connected-react-router:

    Choose connected-react-router if you are using Redux for state management and need to synchronize the router state with the Redux store. This package allows you to keep your routing logic in sync with your application's state, making it easier to manage complex navigation scenarios.

  • mobx-react-router:

    Select mobx-react-router if you are using MobX for state management and prefer a more reactive approach to routing. This library integrates routing with MobX, allowing you to manage routes as observables, which can lead to a more straightforward and less boilerplate-heavy implementation.

  • react-router:

    Opt for react-router if you need a robust and flexible routing solution that works well with any state management library. It offers a comprehensive set of features for defining routes, nested routing, and route transitions, making it suitable for a wide range of applications.

  • react-router-dom:

    Use react-router-dom if you are building a web application that requires routing capabilities specific to the DOM. It extends react-router with additional components and hooks that are tailored for web applications, providing a seamless experience for handling navigation and rendering components based on the URL.

Similar Npm Packages to connected-react-router

connected-react-router is a library that integrates React Router with Redux, allowing you to synchronize your application's routing with the Redux store. This integration enables you to manage navigation and routing state in a more predictable manner, making it easier to handle complex routing scenarios in your React applications. By using connected-react-router, you can dispatch navigation actions and listen for changes in the routing state through Redux, leading to a more cohesive state management approach.

While connected-react-router provides a robust solution for routing in Redux applications, there are several alternatives worth considering:

  • react-router is the standard routing library for React applications. It allows developers to create dynamic routing structures and manage navigation within their applications. While react-router does not inherently integrate with Redux, it can be used alongside Redux for state management. If your application does not require the tight coupling of routing and Redux state, react-router is a solid choice for handling routing independently.
  • react-router-redux is an earlier solution that aimed to connect React Router with Redux. However, it has been largely superseded by connected-react-router, which offers a more streamlined and efficient integration. While react-router-redux can still be used, it is generally recommended to use connected-react-router for better performance and easier implementation.
  • redux-first-history is another library that provides a way to manage history in a Redux application. It allows you to create a history object that can be used with Redux, enabling you to navigate and manage routing state in a Redux-centric manner. If you prefer a more flexible approach to handling history and routing in your Redux applications, redux-first-history might be a suitable alternative.

To see how connected-react-router compares with react-router, react-router-redux, and redux-first-history, check out the comparison: Comparing connected-react-router vs react-router vs react-router-redux vs redux-first-history.

Similar Npm Packages to mobx-react-router

mobx-react-router is a library that integrates MobX with React Router, allowing developers to manage routing in their React applications using MobX's state management capabilities. This combination provides a reactive approach to routing, enabling components to automatically update when the route changes. By leveraging MobX's observable state, mobx-react-router simplifies the process of handling navigation and state synchronization between the router and the application's state.

While mobx-react-router offers a unique solution for integrating routing with MobX, there are several alternatives that developers can consider:

  • connected-react-router is a library that connects React Router with Redux, allowing you to keep your routing state in sync with your Redux store. This integration provides a powerful way to manage routing and application state together, enabling features like navigation history and state persistence. If you're already using Redux for state management and want a seamless way to integrate routing, connected-react-router is an excellent choice.
  • react-router is the core library for routing in React applications. It provides a declarative way to define routes and manage navigation within your app. react-router is highly flexible and can be used with various state management solutions, making it a popular choice for developers. If you are looking for a robust and widely adopted routing solution without specific ties to a state management library, react-router is a solid option.
  • react-router-dom is an extension of react-router specifically designed for web applications. It includes additional components and features tailored for web environments, such as BrowserRouter and Link. If you're building a web application and need a comprehensive routing solution that works seamlessly with React, react-router-dom is the go-to choice.

To see how mobx-react-router compares with connected-react-router, react-router, and react-router-dom, check out the comparison: Comparing connected-react-router vs mobx-react-router vs react-router vs react-router-dom.

Similar Npm Packages to react-router

react-router is a popular routing library for React applications that enables developers to create dynamic and navigable user interfaces. It provides a powerful and flexible way to manage navigation and rendering of components based on the application's URL. With features like nested routes, route parameters, and programmatic navigation, react-router allows for a seamless user experience in single-page applications (SPAs).

One of the most common alternatives to react-router is react-router-dom. This package is specifically designed for web applications and builds on top of react-router, providing additional components and functionality tailored for browser environments. react-router-dom includes features such as the BrowserRouter, Link, and Route components, which facilitate navigation and routing in web applications. If you are building a web application with React, react-router-dom is the go-to choice for implementing routing.

While react-router serves as the core library for routing in React, react-router-dom extends its capabilities for web applications, making it easier to manage routes and navigation in a browser context.

For a detailed comparison between these two packages, visit: Comparing react-router vs react-router-dom.

Similar Npm Packages to react-router-dom

react-router-dom is a popular routing library for React applications that enables developers to create dynamic single-page applications (SPAs) with ease. It provides a powerful set of components and hooks for managing navigation, rendering UI based on the current URL, and handling route transitions. With react-router-dom, developers can create nested routes, route parameters, and even handle redirects, making it a versatile choice for routing in React applications.

While react-router-dom is widely used, there are several alternatives available that cater to different needs and preferences:

  • @reach/router is a lightweight routing library designed for accessibility and simplicity. It focuses on providing a minimalistic API while ensuring that the routes are accessible to all users, including those using assistive technologies. @reach/router is a great choice for developers who prioritize accessibility and want a straightforward routing solution without the additional complexity that may come with other libraries.

  • react-router is the core library behind react-router-dom, providing the fundamental routing capabilities for React applications. While react-router-dom is specifically tailored for web applications, react-router can be used in various environments, including React Native. If you are looking for a more flexible solution that can be adapted to different platforms, react-router is a solid option.

  • react-router-native is an extension of react-router designed specifically for React Native applications. It allows developers to implement routing in mobile applications with a similar API to react-router-dom, making it easier to share routing logic between web and mobile platforms. If you are building a React Native application and want to leverage the familiar routing patterns of react-router, react-router-native is the ideal choice.

To see how these packages compare, check out the comparison: Comparing @reach/router vs react-router vs react-router-dom vs react-router-native.

README for connected-react-router

Breaking change in v5.0.0! Please read How to migrate from v4 to v5/v6.

v6.0.0 requires React v16.4.0 and React Redux v6.0 / v7.0.

Connected React Router Build Status Open Source Helpers

A Redux binding for React Router v4 and v5

Main features

:sparkles: Synchronize router state with redux store through uni-directional flow (i.e. history -> store -> router -> components).

:gift: Supports React Router v4 and v5.

:sunny: Supports functional component hot reloading while preserving state (with react-hot-reload).

:tada: Dispatching of history methods (push, replace, go, goBack, goForward) works for both redux-thunk and redux-saga.

:snowman: Nested children can access routing state such as the current location directly with react-redux's connect.

:clock9: Supports time traveling in Redux DevTools.

:gem: Supports Immutable.js

:muscle: Supports TypeScript

Installation

Connected React Router requires React 16.4 and React Redux 6.0 or later.

npm install --save connected-react-router

Or

yarn add connected-react-router

Usage

Step 1

In your root reducer file,

  • Create a function that takes history as an argument and returns a root reducer.
  • Add router reducer into root reducer by passing history to connectRouter.
  • Note: The key MUST be router.
// reducers.js
import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'

const createRootReducer = (history) => combineReducers({
  router: connectRouter(history),
  ... // rest of your reducers
})
export default createRootReducer

Step 2

When creating a Redux store,

  • Create a history object.
  • Provide the created history to the root reducer creator.
  • Use routerMiddleware(history) if you want to dispatch history actions (e.g. to change URL with push('/path/to/somewhere')).
// configureStore.js
...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import createRootReducer from './reducers'
...
export const history = createBrowserHistory()

export default function configureStore(preloadedState) {
  const store = createStore(
    createRootReducer(history), // root reducer with router state
    preloadedState,
    compose(
      applyMiddleware(
        routerMiddleware(history), // for dispatching history actions
        // ... other middlewares ...
      ),
    ),
  )

  return store
}

Step 3

  • Wrap your react-router v4/v5 routing with ConnectedRouter and pass the history object as a prop. Remember to delete any usage of BrowserRouter or NativeRouter as leaving this in will cause problems synchronising the state.
  • Place ConnectedRouter as a child of react-redux's Provider.
  • N.B. If doing server-side rendering, you should still use the StaticRouter from react-router on the server.
// index.js
...
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4/v5
import { ConnectedRouter } from 'connected-react-router'
import configureStore, { history } from './configureStore'
...
const store = configureStore(/* provide initial state if any */)

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
      <> { /* your usual react-router v4/v5 routing */ }
        <Switch>
          <Route exact path="/" render={() => (<div>Match</div>)} />
          <Route render={() => (<div>Miss</div>)} />
        </Switch>
      </>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('react-root')
)

Note: the history object provided to router reducer, routerMiddleware, and ConnectedRouter component must be the same history object.

Now, it's ready to work!

Examples

See the examples folder

FAQ

Build

npm run build

Generated files will be in the lib folder.

Development

When testing the example apps with npm link or yarn link, you should explicitly provide the same Context to both Provider and ConnectedRouter to make sure that the ConnectedRouter doesn't pick up a different ReactReduxContext from a different node_modules folder.

In index.js.

...
import { Provider, ReactReduxContext } from 'react-redux'
...
      <Provider store={store} context={ReactReduxContext}>
        <App history={history} context={ReactReduxContext} />
      </Provider>
...

In App.js,

...
const App = ({ history, context }) => {
  return (
    <ConnectedRouter history={history} context={context}>
      { routes }
    </ConnectedRouter>
  )
}
...

Contributors

See Contributors and Acknowledge.

License

MIT License

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.