Reactjs 如何使用react router基于路由渲染容器/组件？

我的

routes.jsx

看起来像

return (
  <Route path='/' component={Main}>
    <IndexRoute
      component={Home}
      onEnter={onSearchEnter}
      onChange={(prevState, nextState) => onSearchEnter(nextState)}
    />

    <Route path='privacy' component={Privacy} />
    <Route path='terms' component={Terms} />
    <Route path='dmca' component={DMCA} />

    <Route path='clips/:clip' component={Clip} />
  </Route>
)

但是，如果我在

clips/：clip

路线中，我不想渲染

Nav

组件

我使用的是react路由器

您应该使用react路由器传递到主容器的位置道具

它是一个可以在其中找到当前路径名的对象。我会这样做：

isNavVisible = (location) => {
   return location.pathname.split('/')[1] !== 'clips';
   // location.pathname would be '/clips/someClipID'
   // => location.pathname.split('/') would be ["", "clips", "someClipID"]
}

render () {
  return (
  <div className={`main__container ${get(this, 'props.children.type.parentClassName')}`}>
    {this.isNavVisible(this.props.location) &&
      <Nav
        downloadLinks={this.props.downloadLinks}
        search={this.props.search}
      />
    }
   ...
}

isNavVisible=（位置）=>{
返回location.pathname.split（'/'）[1]！='clips'；
//location.pathname应该是“/clips/someClipID”
//=>location.pathname.split（'/'）将是[“”、“clips”、“someClipID”]
}
渲染（）{
返回(
{this.isNavVisible（this.props.location）&&
}
...
}

您应该使用react路由器传递到主容器的位置道具

它是一个可以在其中找到当前路径名的对象。我会这样做：

isNavVisible = (location) => {
   return location.pathname.split('/')[1] !== 'clips';
   // location.pathname would be '/clips/someClipID'
   // => location.pathname.split('/') would be ["", "clips", "someClipID"]
}

render () {
  return (
  <div className={`main__container ${get(this, 'props.children.type.parentClassName')}`}>
    {this.isNavVisible(this.props.location) &&
      <Nav
        downloadLinks={this.props.downloadLinks}
        search={this.props.search}
      />
    }
   ...
}

isNavVisible=（位置）=>{
返回location.pathname.split（'/'）[1]！='clips'；
//location.pathname应该是“/clips/someClipID”
//=>location.pathname.split（'/'）将是[“”、“clips”、“someClipID”]
}
渲染（）{
返回(
{this.isNavVisible（this.props.location）&&
}
...
}