Javascript 反应路由器在路由时最后追加页面

我有两个组件，{App}和{Blog}，当我试图从App路由到Blog页面时，实际上Blog页面内容附加在App页面的最后。如何从应用程序页面跳转到博客页面

路由：

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


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

const路由=(
);
流星启动（（）=>{
render（路由、文档、查询选择器（“.render target”）；
});

Blog.js：

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

export default Blog; 

类博客扩展组件{
render（）{
返回(
博客
);
};
}
导出默认博客；

您需要使用react路由器的交换机组件。这将确保第一条路线在内部匹配

<BrowserRouter>
    <Switch>
      <Route path="blog" component={Blog}/>
      <Route path="/" component={App}/>
    </Switch>
</BrowserRouter>

正如您在示例中看到的，将blog路由放在/。如果您将/路线作为第一条路线，它将在任何其他路线上与此路线匹配，并在那里停止

有关更多信息，请查看