javascript - 如何在没有 Prop 的情况下从 react 中获得当前路线

我试图根据路线来显示/隐藏按钮以做出反应。

在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。但我正在寻找更好的直接方法（如果有）。

谢谢。

最佳答案

您可以将Link放在第一个render组件的Route prop函数内，以使其不显示在/addStuff路径上。

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