javascript - 如何用react-router替换react组件

Question

基本上我渲染这个 react 组件:

  <Grid>
    <Him className="him"><Link to="/him">Him</Link></Him>
    <Her className="her"><Link to="/her">Her</Link></Her>
  </Grid>

基本上只有 2 个盒子，上面有他和她的链接。

当您点击他时，我有这条路线可以正确呈现我的类别。

<Route
        path="/him"
        render={() => (
          <Categories
            products={products}
            addToBasket={addToBasket}
          />
        )}
      />

但是，它将此组件呈现在他/她的组件下方。这可能听起来很愚蠢，但我如何让它将它们呈现在顶部或代替它？

我可以将组件的状态设置为visible: false 并切换它，但这看起来有点困惑。

本教程中的所有内容:https://reacttraining.com/react-router/web/example/no-match ，似乎让它们通过永远不会消失的 header 进行路由，而我想单击应用程序正文中的链接，然后显示不同的内容。有什么想法吗？

Answer 1

您还必须将网格包装在 route 。你可以做这样的事情

<Route path='/' exact component={LinkComponent} />

代码中的其他地方:

const LinkComponent = () => (
  <Grid>
    <Him className="him"><Link to="/him">Him</Link></Him>
    <Her className="her"><Link to="/her">Her</Link></Her>
  </Grid>
);

这样，如果您转到主路线，您会看到网格，当您单击链接时，您会转到相应的路线，并且网格将被隐藏。