> For the complete documentation index, see [llms.txt](https://gpeterhand.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gpeterhand.gitbook.io/react/redux/connected-react-router.md).

# connected-react-router

Синхронизирует состояние React Router со стором Redux

**Примечание:** первоначально библиотека называлась [react-router-redux](https://github.com/reactjs/react-router-redux). Затем ​переехала на [React Traning](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux). Затем стала называться [connected-react-router](https://github.com/supasate/connected-react-router).

Устанавливаем [connected-react-router](https://github.com/supasate/connected-react-router) и [history](https://github.com/ReactTraining/history)

> yarn add connected-react-router history

Изменяем файл **src/App/index.js**

```jsx
...
import { applyMiddleware, compose, createStore } from 'redux'
...
import { createBrowserHistory } from 'history'
import {
  connectRouter,
  routerMiddleware,
  ConnectedRouter
} from 'connected-react-router'
...

const history = createBrowserHistory()

const store = createStore(
  connectRouter(history)(rootReducer), // new root reducer with router state
  /* preloadedState, */
  compose(
    applyMiddleware(
      routerMiddleware(history) // for dispatching history actions
      // ... other middlewares ...
    )
  )
)

const App = () => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      ...
    </ConnectedRouter>
  </Provider>
)
...
```

Запускаем. Пощелкаем по кнопкам. При клике на кнопке в консоли должно отображаться: *{type: "@@router/LOCATION\_CHANGE", payload: {…}}*

Это значит, что все сделано правильно

Из файла **src/App/services.js** можно удалить console.log

```jsx
const rootReducer = (state = {}) => state

export default rootReducer
```