问如何使用react路由器根据路由呈现容器/组件？
EN

Stack Overflow用户

提问于 2016-12-16 00:44:42

回答 1查看 938关注 0票数 0

我的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>
)

在我的Main中，我有如下内容：

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

但是，如果处于Nav路由，则不希望呈现clips/:clip组件。

我用的是react-router

react-router

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-16 01:18:45

您应该使用通过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}
      />
    }
   ...
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41175656

复制

相似问题

问如何使用react路由器根据路由呈现容器/组件？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用react路由器根据路由呈现容器/组件？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用react路由器根据路由呈现容器/组件？
EN