react-router如何寫(xiě)兩個(gè)不同的header導(dǎo)航

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, NavLink,Switch } from "react-router-dom";
import './index.less';

import Index from '../../pages/Index';
import About from '../../pages/About';
import ProfessorList from '../../pages/ProfessorList';
import Intro from '../../pages/Intro';
import logo from '../../images/logo.png';

export default class Header extends Component {
    render() {
        return (
            <Router>
                <div className="header">
                    <div className="logo-bar">
                        <div className="fixed-width">
                            <div className="logo">
                                <img src={logo} alt="logo" />
                            </div>
                            <div className="search-bar">

                            </div>
                        </div>
                    </div>
                    <div className="header-bar">
                        <div className="fixed-width">
                            <ul>
                                <li>
                                    <NavLink to="/" exact activeClassName="nav-active">首頁(yè)</NavLink>
                                </li>
                                <li>
                                    <NavLink to="/intro" activeClassName="nav-active">智庫(kù)概況</NavLink>
                                </li>
                                <li>
                                    <NavLink to="/professor" activeClassName="nav-active">專(zhuān)家團(tuán)隊(duì)</NavLink>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div className="content">
                        <Switch>
                            <Route exact path="/" component={Index}/>
                            <Route path="/professor" component={ProfessorList}/>
                            <Route path="/intro" component={Intro}/>
                        </Switch>
                    </div>
                </div>
            </Router>
        );
    }
}

如上是我寫(xiě)好的header導(dǎo)航，我想寫(xiě)另一個(gè)header導(dǎo)航在打開(kāi)其他頁(yè)面的時(shí)候展示，在注冊(cè)組件的時(shí)候該怎么注冊(cè)？

mainroute.js

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NewsDetail from '../pages/NewsDetail';
import TopBar from '../components/TopBar';
import Header from '../components/Header';
import Index from '../pages/Index';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Intro from '../pages/Intro';
import App from '../index';

const routes = [
    {
        path: "/detail/:id",
        component: NewsDetail
    },
    // {
    //     path: "/index",
    //     component: Index
    // },
    // {
    //     path: "/about",
    //     component: About
    // },
    // {
    //     path: "/contact",
    //     component: Contact
    // },
    // {
    //     path: "/intro",
    //     component: Intro
    // },
    // {
    //     path: "/tacos",
    //     component: Tacos,
    //     routes: [
    //         {
    //             path: "/tacos/bus",
    //             component: Bus
    //         },
    //         {
    //             path: "/tacos/cart",
    //             component: Cart
    //         }
    //     ]
    // }
];

const RouteWithSubRoutes = route => (
    <Route
        path={route.path}
        render={props => (
            <route.component {...props} routes={route.routes} />
        )}
    />
);

const MainRoute = () => (
    <Router>
        <Switch>
            {/*<Route exact path="/" component={Index}/>*/}
            <Header/>
            <TopBar/>
            {routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
        </Switch>
    </Router>
);

export default MainRoute;

App.js

import React, { Component } from 'react';
import MainRoute from './router/';

class App extends Component {
    render() {
        return (
            <div>
                <MainRoute/>
            </div>
        );
    }
}

export default App;

index.js

import React from "react";
import ReactDOM from 'react-dom';
import './style/common.less';

import App from './App'
ReactDOM.render(<App/>, document.getElementById('root'))

我這樣寫(xiě)則會(huì)在所有頁(yè)面都存在header導(dǎo)航，而不是換成另一個(gè)導(dǎo)航，該怎么辦？