如何用 react-router 替换一个 react 组件答案

【问题标题】：How to replace a react component with react-router如何用 react-router 替换一个 react 组件
【发布时间】：2018-06-05 00:35:48
【问题描述】：

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

  <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，似乎让它们通过永远不会消失的标头进行路由，而我想单击应用程序正文中的链接，然后显示不同的内容。有什么想法吗？

【问题讨论】：

你想同时渲染链接和链接的内容？这对我来说还不够清楚。
@JohuderGonzalez 一旦我点击我想要呈现新内容的链接，这些链接就会消失。这有意义吗？

标签： javascript reactjs react-router

【解决方案1】：

您还必须将 Grid 包装在 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>
);

这样，如果你去home route，你会看到Grid，当你点击一个Link时，你会去相应的路由，Grid会被隐藏。

【讨论】：

【解决方案2】：

好的，您只想在单击/him 或/her 时替换整个内容，因此正如 Xander Berkein 所说，您应该将链接渲染到主组件中，然后将其分配给 / 主路由，y这样你就需要使用exact prop 来渲染与 URL 匹配的第一个路径，所以

<Switch>
<Route exact path={‘/‘} component={<Links/>} />
<Route exact path={‘/him’} component={<HimComponent/> />
<Route exact path={‘/her’} component={<HerComponent /> />
</Switch>

希望对你有用。

【讨论】：