在不同的组件中反应路由器

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
    }))
}));