React Components are not getting rendered in react routes

Question

I am trying to create a footer with react, but other components are not getting displayed when I click on the link in footer.

Main.js

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

);

Footer.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>

        );

App.js

const App = ()=>
(
    <div>
        <Main/>
        <Footer/>
  </div>
);

The problem is that components are not getting rendered if i click on the link.

What do I need to do to resolve this?