Question

基本上我正在渲染这个反应组件：

  <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}
          />
        )}
      />

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

我可以将组件的状态设置为可见：false并切换，但这看起来有点混乱。

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

Answer 1

您还必须将网格包裹在路线中。你可以做这样的事情

Business Unit 2

代码中的其他地方：

<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> );，当您点击链接时，您将转到相应的路线，{隐私Grid将被隐藏。

Answer 2

好的，您只想在点击/him或/her时替换整个内容，因为Xander Berkein说您应该将链接呈现为主要组件，然后将其分配给{{1主路由，你需要使用/ prop来呈现与URL匹配的第一个路径，所以

exact

我希望你觉得它很有用。

如何用react-router替换react组件

2 个答案: