React组件未在反应路由中呈现

Question

我正在尝试使用react创建一个页脚，但是当我点击页脚中的链接时，其他组件不会显示。

Main.js

https://example.com?city=somecity

Footer.js

const Main = () =>
(
    <main>
    <Switch>
       <Route path='/' component= {SearchPage}/>
       <Route path='/about' component={AboutPage}/>
       <Route path='/home' component={HomePage}/>
  </Switch>
     </main>

);

App.js

const Footer = () => {

    return (
        <footer>
        <div className="navbar navbar-inverse navbar-fixed-bottom">
        <div className="container">
        <nav>
            <NavLink to="/home" activeClassName="active">Home</NavLink> {" | "}
            <NavLink to="/about" activeClassName="active">About Us</NavLink> {" | "} 

        </nav>
    </div>
    </div>
    </footer>

        );

问题是，如果我点击链接，组件就不会被渲染。

我需要做些什么来解决这个问题？