Trigger a page redirect after a successful form submission by dispatching a standard Redux action.
Read the current URL in any Redux-connected component without wiring it into the router separately.
Use Redux DevTools to step backwards and forwards through navigation history alongside state changes.
Build a React app where all navigation is controlled by and recorded in the Redux store.
All three setup pieces, router reducer, middleware, and ConnectedRouter, must share the same history object, which requires careful wiring.
Connected React Router is a JavaScript library for web developers building apps with React. It solves a specific coordination problem: when you use Redux to manage your app's data and React Router to handle page navigation, the two systems normally operate independently and can fall out of sync. This library links them together so that the current URL is always reflected in the Redux data store, and changes to that store can trigger navigation. The practical benefit is that navigation becomes part of the same data flow as everything else in the app. You can trigger a page change by dispatching a standard Redux action, which is useful when navigation needs to happen as a side effect of some other action, like successfully submitting a form. Any component that is connected to the Redux store can also read the current URL directly, without needing to be wired into the router separately. Another benefit is time-travel debugging. Redux DevTools lets you step backwards and forwards through the history of state changes in your app. With this library, those steps also move the browser URL backwards and forwards to match, so you can replay sequences of events including the pages a user visited. Setting up the library requires three steps: adding a router section to your Redux reducer, applying a piece of middleware when creating the store, and wrapping your routing components with a ConnectedRouter wrapper. All three steps need to share the same history object, which tracks the browser's navigation state. The library supports TypeScript and works with Immutable.js for teams that use those tools. It covers React Router versions 4 and 5. The README includes code examples for each setup step and a FAQ covering common scenarios like server-side rendering and React Native.
← supasate on gitmyhub — every repo by this author, as a profile.
Verify against the repo before relying on details.