javascript - React router 在路由时最后追加页面

Question

我有两个组件，{App} 和 {Blog}，当我试图从 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; 

Answer 1

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

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

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

有关更多信息，请查看 this piece