How to write two different header navigations for react-router

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

this is the header navigation I wrote above. I want to write another header navigation to show when opening other pages. How should I register when registering the component?

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

what should I do if I write that there will be header navigation on all pages instead of another navigation?

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