react-router如何写两个不同的header导航

Question

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">首页</NavLink>
                                </li>
                                <li>
                                    <NavLink to="/intro" activeClassName="nav-active">智库概况</NavLink>
                                </li>
                                <li>
                                    <NavLink to="/professor" activeClassName="nav-active">专家团队</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>
        );
    }
}

如上是我写好的header导航，我想写另一个header导航在打开其他页面的时候展示，在注册组件的时候该怎么注册？

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'))

我这样写则会在所有页面都存在header导航，而不是换成另一个导航，该怎么办？

Answer 1

假设另一个header组件是AnotherHeader
mainroute.js中这样写

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

其中条件为true显示Header组件,false则显示AnotherHeader,不知道理解的对不对，望有效