路由时React路由器最后添加页面

Question

我有两个组件，{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"));
});

Blog.js：

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

export default Blog; 

Answer 1

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

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

在示例中可以看到，将博客路由放在/之前。如果将/路由作为第一个路由，它将与其他任何路由上的该路由匹配并在此处停止。

有关更多信息，请查看此部分