React路由器在路由时最后附加页面答案

【问题标题】：React router appends page at last when routingReact路由器在路由时最后附加页面
【发布时间】：2017-11-01 16:59:36
【问题描述】：

我有两个组件，{App} 和 {Blog}，当我试图从 App 路由到博客页面时，实际上博客页面内容附加在 App 页面的最后。如何从 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"));
});

博客.js：

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

export default Blog;

【问题讨论】：

标签： javascript meteor react-router

【解决方案1】：

你需要使用 react-router 中的 Switch 组件。这将确保第一个路由在内部匹配。

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

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

欲了解更多信息，请查看this piece

【讨论】：