使用 React 路由器 dom 从父级渲染函数内部的组件导航答案

【问题标题】：Using React router dom to navigate from component inside of render function of parent使用 React 路由器 dom 从父级渲染函数内部的组件导航
【发布时间】：2017-12-23 16:10:33
【问题描述】：

我已经尝试了很长时间来弄清楚如何使用react-router-dom 创建导航下拉菜单。我的问题是我希望能够在下拉列表中选择当前页面，我这样做的方法是将所选项目保留在父级的 this.state 变量中。这是我目前在render() 函数中的代码（我使用react-bootstrap 组件作为下拉菜单）：

  <Dropdown.Menu className="dropdown-menu-right">
    <MenuItem name="bandList"
      className={(this.state.activeView === "bandList") ? "active" : ""}
      onClick={ this.handleClick } >
      Hitta Band
    </MenuItem>
    <MenuItem name="musiciansList"
      className={(this.state.activeView === "musiciansList") ? "active" : ""}
      onClick={ this.handleClick } >
      Hitta Musiker
    </MenuItem>
  </Dropdown.Menu>

还有handleClick() 函数：

handleClick(event){
  var name = event.target.name;
  this.setState({
    activeView: name
  })
}

我已经阅读了这里的帖子：Programmatically navigate using react router

但是其中描述的方法是创建一个新组件并将其包装在 withRouter 函数或 <Route> 组件中，这在我的情况下不起作用。问题是我需要能够更改this.state 并在单击菜单时导航到另一条路线。我尝试创建一个新组件并将其包装在 withRouter() 中，如下所示：

const BandListNav = withRouter(({history}) => (
  <MenuItem
    name="bandList"
    onClick={() => history.push('/bandList')}
    >
    Hitta Band
  </MenuItem>
));

然后在父组件中render() 函数将是：

  <Dropdown.Menu className="dropdown-menu-right">
    <BandListNav
      className={(this.state.activeView === "bandList") ? "active" : ""}
      onClick={ this.handleClick }
    />
  </Dropdown.Menu>

但在这种情况下，this.handleClick 函数不会被调用（我猜它会被BandListNav 组件中的onClick() 函数覆盖。

基本上我想做的是改变父组件的状态，同时导航到另一条路线。

有没有办法使用react-router-dom (v4) 来做到这一点？

任何帮助表示赞赏。提前致谢！

【问题讨论】：

stackoverflow.com/questions/44127739/…
您是否有理由需要将当前视图存储在您的状态中？这可以随时随地通过 window.location.pathname 轻松确定。如果您在点击时进行路由，您应该使用<Route /> 组件。
我需要能够为当前视图提供active 类。但如果我可以使用window.location.pathname 来做到这一点，那可能会奏效。就像写 className={(window.location.pathname === "/bandList") ? "active" : ""} 而不是我以前那样。
@KyleRichardson 非常感谢。我尝试使用 window.location.pathname 而不是状态变量，它起作用了。
不客气！很高兴你得到了你需要的东西！

标签： javascript reactjs react-router

【解决方案1】：

我实施了凯尔·理查森在 cmets 中所说的内容，并且按我的意愿工作。以下是我更改代码的方式，感兴趣的朋友可以参考一下：

  <Dropdown.Menu className="dropdown-menu-right">
    <BandListNav/>
    <MusiciansListNav/>
  </Dropdown.Menu>

组件变成了：

const BandListNav = withRouter(({history}) => (
  <MenuItem
    name="bandList"
    onClick={() => history.push('/bandList')}
    className={(window.location.pathname === "/bandList") ? "active" : ""}
    >
    Hitta Band
  </MenuItem>
));

const MusiciansListNav = withRouter(({history}) => (
  <MenuItem
    name="musiciansList"
    onClick={() => history.push('/musiciansList')}
    className={(window.location.pathname === "/musiciansList") ? "active" : ""}
    >
    Hitta Musiker
  </MenuItem>
));

这为我节省了很多时间。非常感谢您的回答，我希望这对其他人有所帮助。

【讨论】：

【解决方案2】：

您可以 1) 允许 NavLink 组件使用 active 属性为您管理选择的菜单项，2) 修改您希望在 css 中指定为活动类的类的名称使用 NavLink 的 "activeClassName=" 属性，或 3) 自定义 NavLink 组件，如此 stackoverflow question 中所述。

【讨论】：