connected-react-router vs react-router vs react-router-redux vs redux-first-history
React Routing Libraries
Search packages..
connected-react-routerreact-routerreact-router-reduxredux-first-historySimilar Packages:

React Routing Libraries

These libraries facilitate routing in React applications, allowing developers to manage navigation and state in a way that integrates seamlessly with React's component-based architecture. They help in creating single-page applications (SPAs) by enabling dynamic routing, maintaining browser history, and ensuring that the UI reflects the current URL state. Each library offers unique features and approaches to routing, making them suitable for different use cases and preferences in 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
react-router056,2524.14 MB156a month agoMIT
react-router-redux07,772-19 years agoMIT
redux-first-history045399.3 kB152 years agoMIT

Feature Comparison: connected-react-router vs react-router vs react-router-redux vs redux-first-history

State Management Integration

  • connected-react-router:

    This library integrates deeply with Redux, allowing you to keep your routing state in the Redux store. This means that any changes to the route can trigger Redux actions, making it easier to manage application state in a predictable manner.

  • react-router:

    React-router operates independently of Redux, focusing solely on routing. It provides a simple API for defining routes and managing navigation, making it ideal for applications that do not require complex state management.

  • react-router-redux:

    While it aimed to bridge React Router with Redux, it is now deprecated. It provided a way to sync routing state with Redux but is no longer recommended for new projects.

  • redux-first-history:

    This library allows you to create a history object that can be used with Redux, enabling you to manage navigation actions and state in a Redux-centric way. It provides a clear separation between routing and application state.

Flexibility and Complexity

  • connected-react-router:

    Offers flexibility by allowing developers to manage routing state alongside application state in Redux. This can add complexity but is beneficial for larger applications that require tight integration between routing and state management.

  • react-router:

    Highly flexible and easy to use, making it suitable for a wide range of applications. It allows developers to define nested routes and dynamic routing without the overhead of Redux.

  • react-router-redux:

    Provided a more complex solution for syncing routing with Redux, but its deprecation means it is no longer a viable option for new projects.

  • redux-first-history:

    Balances flexibility and complexity by allowing developers to manage routing in a Redux-first approach, making it suitable for applications that already use Redux.

Learning Curve

  • connected-react-router:

    Has a moderate learning curve due to its integration with Redux. Developers need to understand both Redux and React Router to use it effectively, which may take some time for beginners.

  • react-router:

    Generally considered easy to learn, especially for those familiar with React. Its API is straightforward, making it accessible for new developers.

  • react-router-redux:

    The learning curve was higher due to the need to understand both React Router and Redux. Its deprecation means it's no longer a recommended choice for new developers.

  • redux-first-history:

    Offers a moderate learning curve, especially for those familiar with Redux. It requires understanding how to manage history in a Redux-centric way.

Community and Support

  • connected-react-router:

    Has a growing community, especially among developers using Redux. However, it may not have as extensive support as more established libraries.

  • react-router:

    One of the most widely used routing libraries in the React ecosystem, with a large community and extensive documentation. It is well-supported and frequently updated.

  • react-router-redux:

    As a deprecated library, it no longer receives updates or community support, making it a poor choice for new projects.

  • redux-first-history:

    While it has a smaller community compared to react-router, it is gaining traction among Redux users looking for a history management solution.

Performance

  • connected-react-router:

    Performance is generally good, but it can be impacted by the complexity of the Redux state management. Proper optimization techniques in Redux can mitigate performance issues.

  • react-router:

    Offers excellent performance for most applications, with efficient route matching and rendering. It is optimized for single-page applications, ensuring fast navigation.

  • react-router-redux:

    Performance was dependent on both React Router and Redux, but its deprecation means it is no longer a consideration for new projects.

  • redux-first-history:

    Performance is generally good, but as with connected-react-router, it can be affected by how Redux is implemented in the application.

How to Choose: connected-react-router vs react-router vs react-router-redux vs redux-first-history

  • connected-react-router:

    Choose connected-react-router if you are using Redux for state management and want to synchronize your routing with the Redux store. It allows you to manage the routing state in Redux, making it easier to handle complex state interactions and side effects in your application.

  • react-router:

    Select react-router for a straightforward and flexible routing solution that is widely adopted in the React community. It is suitable for most applications, providing a robust API for defining routes and handling navigation without the need for Redux integration.

  • react-router-redux:

    Opt for react-router-redux if you need to connect your routing state to Redux but prefer a more integrated approach than connected-react-router. However, note that this package is now deprecated, and you may want to consider alternatives like connected-react-router instead.

  • redux-first-history:

    Use redux-first-history if you want to manage your routing in a Redux-first manner while maintaining a clear separation of concerns. It allows you to create a history object that integrates with Redux, enabling you to dispatch actions based on navigation events.

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 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-redux

react-router-redux is a library that integrates React Router with Redux, allowing for seamless synchronization of the router state with the Redux store. This integration enables developers to manage navigation and routing in a React application using Redux's state management capabilities. While react-router-redux provides a solid solution for routing in Redux applications, there are other alternatives worth considering:

  • connected-react-router is a popular alternative that also connects React Router with Redux. It allows you to keep your router state in sync with your Redux store, enabling you to navigate programmatically and access the router state from anywhere in your application. connected-react-router is particularly useful for applications that require complex routing logic and want to leverage Redux's capabilities for managing application state.
  • react-router is the core library for routing in React applications. While it does not directly integrate with Redux, it provides a robust set of features for managing navigation and rendering components based on the current URL. If your application does not require the complexity of Redux for routing, using react-router alone may be sufficient for your needs.
  • redux-first-history is another library that provides a way to manage routing in a Redux-first manner. It allows you to create a history object that is compatible with Redux, enabling you to dispatch actions based on navigation events. This library is particularly useful for developers who prefer to keep all application state, including routing, within Redux.
  • redux-logger is a middleware for Redux that logs actions and state changes to the console. While it does not directly handle routing, it can be beneficial in debugging applications that use routing libraries like react-router-redux or connected-react-router. By providing insights into the actions dispatched and the resulting state changes, redux-logger can help developers understand how routing impacts their application state.

For a comprehensive comparison of these packages, check out the following link: Comparing connected-react-router vs react-router vs react-router-redux vs redux-first-history vs redux-logger.

Similar Npm Packages to redux-first-history

redux-first-history is a library that integrates the Redux state management pattern with the history API, allowing developers to manage navigation and routing in a Redux-centric way. This package is particularly useful for applications that require a unified approach to handling both application state and navigation state. By leveraging Redux, redux-first-history enables developers to maintain a single source of truth for their application's state, including the current route.

While redux-first-history offers a robust solution for routing in Redux applications, there are several alternatives that also provide similar functionalities:

  • 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 enables you to dispatch actions that change the route and have those changes reflected in the Redux state. If you are already using React Router and want to manage routing through Redux, connected-react-router is a solid choice.

  • react-router-redux is an older library that was designed to connect React Router with Redux. It allows you to synchronize the router state with the Redux store. However, it has been largely superseded by connected-react-router, which offers a more modern and efficient approach to routing in Redux applications.

  • redux-first-router is another library that provides a Redux-centric approach to routing. It allows you to define routes as part of your Redux actions, making it easier to manage navigation alongside application state. This library is particularly useful for developers who prefer to define their routing logic in a way that is tightly integrated with Redux.

  • redux-logger is a middleware for Redux that logs actions and state changes to the console. While it does not directly handle routing, it can be a valuable tool for debugging and monitoring the state of your application, including routing changes when used alongside routing libraries.

  • redux-saga is a middleware library that helps manage side effects in Redux applications. It is particularly useful for handling asynchronous actions, such as data fetching or complex routing logic. While not specifically a routing library, redux-saga can be used in conjunction with routing libraries to manage navigation-related side effects.

To explore how these libraries compare, check out the following link: Comparing connected-react-router vs react-router-redux vs redux-first-history vs redux-first-router vs redux-logger vs redux-saga.

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.