reactjs - React Router: Render new view without page refresh -

hello! i'm trying rework react-router navlink renders new page on click, instead of rendering @ bottom of div, shown in gif above.

here's content of main app.js component:

import react, { component } 'react'; import './app.css'; import {browserrouter router, switch, route} 'react-router-dom'; import home './home.js'; import './about.js'; import september './september.js'; import trilogy './trilogy.js';  class app extends component {   render() {     return ( <router> <div> <switch>   <route exact path = '/' component={home} />   <route path = '/about/' component = {about} />   <route path = '/september/' component = {september} />   <route exact path = '/september/trilogy/' component = {trilogy} /> </switch>   </div>   </router> ); } } export default app; 

the home component's code, holds navbar that's used in home page.

import react, { component } 'react'; import {browserrouter router, navlink, switch, route} 'react-router-dom'; import logo './logo.png'; import './about.js'; import september './september.js'; import trilogy './trilogy.js';  let navbar = () => {   return (     <div>     <h2 classname = "container2"><navlink = '/about/'>about</navlink> </h2>     <img src = {logo} classname = "somersetlogo" alt = "somersetlogo" />     <h2 classname = "container" ><a href="mailto:contact@somersetproductions.co" classname = "mailto">contact</a></h2>     </div>   ) }  class home extends component { render(){     return (   <router>     <div>     <navbar />     <switch>      <route exact path = '/about/' component = {about} />     </switch>     </div>   </router>     )     } }  export default home; 

any idea went wrong? appreciated! thanks!

if using react router v4 or above should this.

import { link } 'react-router-dom';  <link to='/about'>     </link> 

why defining router again in home component not needed. keeping route configuration in app component enough. hope helps. happy coding !