React Router в разных компонентах

Question

Итак, у меня есть два компонента: App.js и MainNav.js. Моя цель здесь состоит в том, чтобы App.js содержал всю информацию о маршрутизации, а MainNav.js содержал навигацию.

App.js

import React, { Component } from 'react';
import './App.css';
import * as ReadableAPI from './Utils/ReadableAPI';
import { Route, Link, withRouter } from 'react-router-dom'
import {addPost} from "./Actions/Posts";
import { connect } from 'react-redux'
import MainNav from "./Components/MainNav";

class App extends Component {

    componentWillMount = () => {
        const { store } = this.props;
        console.log(store.getState());
    }
    addPost = () => {
        let timestamp = Date.now();
        this.props.store.dispatch(addPost({
            id: 'fdafsf',
            timestamp: timestamp,
            body: 'this is the body',
            author: 'this is the title',
            category: 'category',
            title: 'this is the title'
        }))
    }
    render() {
        const { category, posts } = this.props;
        console.log(category);
        return (
          <div className="App">
              <Route exact path={"/"} render={() => (
                  <div>
                      <MainNav categories={category} active={"all"}/>
                  </div>
              )}/>
              <Route path={"/react"} render={() => (
                  <div>
                    <MainNav categories={category} active={"react"}/>
                  </div>
              )}/>
              <Route path={"/redux"} render={() => (
                  <div>
                    <MainNav categories={category} active={"redux"}/>

                  </div>
              )}/>
              <Route path={"/udacity"} render={() => (
                  <div>
                    <MainNav categories={category} active={"udacity"}/>
                  </div>
              )}/>
          </div>
        );
  }
}

function mapStateToProps({posts, category}) {
    return {
        posts: posts,
        category: category
    }
}
export default withRouter(connect(
    mapStateToProps
)(App))
// export default App;

MainNav.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Route, Link } from 'react-router-dom'

class MainNav extends Component{
    static propTypes = {
        categories: PropTypes.array.isRequired,
        active: PropTypes.string.isRequired
    }

    render() {
        const { categories, active } = this.props;
        const currentTab = active;
        return (

            <div className={"main-nav-container"}>
                <ul className={"main-nav-list"}>
                    <li className={"main-nav-list-item " + (currentTab === 'all' ? 'active':'')}>
                        <Link
                            to={"/"}
                        >
                            <div className={"category"}>
                                All
                            </div>
                        </Link>
                    </li>
                    {categories.map( (category) => (
                        <li className={"main-nav-list-item " + (currentTab === category.name ? 'active':'')} key={category.path}>
                            <Link
                                to={"/" + category.path}
                            >
                                <div className={"category"}>
                                    {category.name}
                                </div>
                            </Link>
                        </li>
                    ))}
                </ul>
            </div>
        )
    }
}

export default MainNav

Проблема в том, что компоненты ссылок действительно меняют URL, но, похоже, не обновляют реквизиты в MainNav (мне нужно обновить их, чтобы изменить, какой элемент навигации считается активным). Это правильный метод или мне нужно, чтобы весь этот код повторялся в App.js?

редактирование:

Как я и просил, это мой файл index.js, который является моим файлом верхнего уровня:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware, compose } from 'redux'
import reducer from './Reducers'
import { Provider } from 'react-redux';
import logger from 'redux-logger';
import { combineReducers } from 'redux';
import * as ReadableAPI from './Utils/ReadableAPI';
import {addInitialStatePost} from "./Actions/Posts";
import {addInitialStateCategories} from "./Actions/Categories";
import { BrowserRouter } from 'react-router-dom'


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__  || compose;

const store = createStore(
    reducer,
    composeEnhancers(
        applyMiddleware(logger)
    )
);

ReactDOM.render(
    <BrowserRouter><Provider store={store}>
        <App store={store}/>
    </Provider></BrowserRouter>, document.getElementById('root')

);
registerServiceWorker();

//set up the initial state of the app
ReadableAPI.getAllPosts().then(res => res.forEach((p) => {
    store.dispatch(addInitialStatePost({
        id: p.id,
        author: p.author,
        body: p.body,
        category: p.category,
        commentCount: p.commentCount,
        deleted: p.deleted,
        timestamp: p.timestamp,
        title: p.title,
        voteScore: p.voteScore
    }))
}));

ReadableAPI.getCategories().then(res => res.forEach((c) => {
    store.dispatch(addInitialStateCategories({
        name: c.name,
        path: c.path
    }))
}));