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

Question

我正在尝试让 show/hide 按钮根据路线作出反应。

在 home.js 中，我正在渲染以下内容：

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

当路由为“/”时，它只呈现带有添加内容按钮和一些文本内容的 addStuff 组件。

但我想隐藏 AddStuff 组件中的 "Add Stuff" 按钮。

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

我也尝试过 withRouter。但我正在寻找更好的直接方法。

谢谢。

Answer 1

您可以将 Link 放在第一个 Route 组件的 render 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} />

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

How to get the current route from react without props

javascript

reactjs

react-router

react-router-v4