Question

我试图根据路线来显示/隐藏一个按钮。

在home.js中，我呈现了以下内容：

<Route exact path="/" render={()=> <TotalStuff totalStuff={totalStuff} />} />
<Link to="/addStuff"><button>Add Stuff</button></Link>
<Route path="/addStuff" exact component={AddStuff} />

当route为“ /”时，它只是使用“添加填充”按钮和一些文本内容来呈现addStuff组件。

但是我想在 AddStuff 组件中隐藏“添加材料”按钮。

尝试使用window.location.pathname时，不会随着路由器的更改而更新。

我还尝试了 withRouter 。但是，我正在寻找更好的直接方法。

谢谢。

Answer 1

您可以将Link放在第一个render组件的Route属性中，以使其不显示在/addStuff路径上。

<Route
  exact
  path="/"
  render={() => (
    <div>
      <TotalStuff totalStuff={totalStuff} />
      <Link to="/addStuff">
        <button>Add Stuff</button>
      </Link>
    </div>
  )}
/>
<Route path="/addStuff" exact component={AddStuff} />

如何在没有道具的情况下从反应中获得当前路线

1 个答案: