React Router v4 & Redux?

Question

React

Good afternoon! Cannot sync React-router-dom with redux in any way.
app.js

import React from 'react';
import { render } from 'react-dom';

// Redux
import { createBrowserHistory } from 'history';
import { routerMiddleware, routerReducer as routing, syncHistoryWithStore } from 'react-router-redux';
import { applyMiddleware, createStore, combineReducers } from 'redux';
import { browserHistory } from 'react-router-dom';
import { Provider } from 'react-redux';

// App
import AppRouter from './routing/MainRouter';
import { loadState, saveState } from './utils/storage';

// Init Store
const reducers = {
    routing
}

const middleware = routerMiddleware(browserHistory);
const store = createStore(combineReducers(reducers), loadState(), applyMiddleware(middleware))
const history = syncHistoryWithStore(createBrowserHistory() , store);

// Subscribe
store.subscribe(() => {
    saveState(store.getState());
})

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppRouter history={history} />
      </Provider>
    )
  }
}

render(<App/>, document.getElementById('app'))

AppRouter

const AppRouter = (props) => {
    return (
        <Router history={ props.history }>
            <MainLayout>
                <Switch>
                    <Route path='/' component={ MainBlogPageComponent } />
                    <Route exact path='/page/about' component={ AboutPageComponent } />
                    <Route exact path='/page/contact' component={ ContactPageComponent } />
                </Switch>
            </MainLayout>
        </Router>
    )
}

export default AppRouter;

Links

const TopMenuComponent = (props) => {
    return (
        <div className='top-menu'>
            <div className='container'>
                <div className='row'>
                    <div className='col-md-3 col-sm-2'>
                        <div className='logo'>
                            <div className='logo__name'><a href='#'>Dikii Grigorii</a></div>
                        </div>
                    </div>
                    <div className='col-md-9 col-sm-10'>
                        <div className='text-right'>
                            <ul className='top-menu__list nav-list clear-list'>
                                <li><Link className='nav-list__link' to='/'>Главная</Link></li>
                                <li><Link className='nav-list__link' to='/'>Блог</Link></li>
                                <li><Link className='nav-list__link' to='/portfolio'>Портфолио</Link></li>
                                <li><Link className='nav-list__link' to='/page/about'>Обо мне</Link></li>
                                <li><Link className='nav-list__link' to='/page/contact'>Контакты</Link></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default TopMenuComponent;

Everything changes in the store, but only props.history is not updated when it changes.

Answer 1

Here are more examples of react-router and redux