How can I integrate React Router with Redux?

How can I integrate React Router with Redux?

To integrate React Router with Redux, you can use the react-router-redux library. This allows you to keep your routing in sync with your Redux store.

What are the steps to set it up?

First, install the necessary packages: react-router and react-redux. Then, create a Redux store and wrap your app with the Provider from react-redux. Finally, use the ConnectedRouter from react-router-redux to manage your routes.

Can you show me a code example?

Sure! Here's a simple example:

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
const store = createStore(rootReducer);

function App() {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        {/* Your routes go here */}
      </ConnectedRouter>
    </Provider>
  );
}

What if I want to navigate programmatically?

You can use the history object to navigate programmatically. For example, history.push('/new-route') will take you to the specified route.