如何使用react-router渲染基于路线的容器/组件？

Question

我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

Answer 1

您应使用真实的反应路由器传递给你的主容器的位置道具。

这是一个可以找到当前路径名的对象。我会做这样的事情：

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} 
     /> 
    } 
    ... 
}