React router appends page at last when routing

I have two components, {App} and {Blog}, when I was trying to route to Blog page from App, actually the Blog page content was appended at the last of App page. How can I jump to the blog page from App page?

Routing:

const routes = (
  <BrowserRouter>
    <div>
      <Route path="/" component={App}/>
      <Route path="blog" component={Blog}/>
    </div>
  </BrowserRouter>
);


Meteor.startup(() => {
  ReactDOM.render(routes, document.querySelector(".render-target"));
});

Blog.js:

class Blog extends Component{
  render(){
    return(
      <div>Blog</div>
    );
  };
}

export default Blog;