Reactjs 使用React路由器在路线上设置状态/道具

我对反应有些生疏。所以请容忍我。我有以下基本结构：

<App>
 this.props.children
</App>

这是道具

…在子级中，有一个组件是标题，它包含我想要的可选搜索组件：

<Header>
  ...some other children...
  <Search /> <- STUCK HERE SHOULD BE OPTIONAL!!!
</Header>
 ...children from other components...

interface HeaderProps {
  showSearch: boolean
}

export const Header: React.FC<HeaderProps> = ({ showSearch }) => {
  return (
    <React.Fragment>
      { showSearch ? <Search /> : null }
    </React.Fragment>
  )
}

…其他一些孩子。。。
首先设置您的路线

<Router path="/" component={App}>
  <Route path="foo" component={Header} showSearch={true} />
  <Route path="bar" component={Header} showSearch={false} />
</Router>

也许你不想让你的标题成为顶级组件。在这种情况下，定义一个中介包装器组件，将路由道具向下转发到报头

<Router path="/" component={App}>
  <Route path="foo" component={Shell} showSearch={true} />
  <Route path="bar" component={Shell} showSearch={false} />
</Router>

// Shell
render() {
  const { route } = this.props;
  return (
    <div className='shell'>
      <Header {...route} />
    </div>
  );
}

如果您想使用功能组件，React Router为此专门创建了一个API，名为
render

例如：

<Route
  path='/search'
  render={(props) => (
    <Header {...props} showSearch={true} />
  )}
/>

(
)}
/>

然后只需在组件中正常使用道具：

<Header>
  ...some other children...
  <Search /> <- STUCK HERE SHOULD BE OPTIONAL!!!
</Header>
 ...children from other components...

interface HeaderProps {
  showSearch: boolean
}

export const Header: React.FC<HeaderProps> = ({ showSearch }) => {
  return (
    <React.Fragment>
      { showSearch ? <Search /> : null }
    </React.Fragment>
  )
}

接口头程序{
showSearch:boolean
}
导出常量头：React.FC=（{showSearch}）=>{
返回(
{showSearch？：null}
)
}

请参阅Tyler McGinnis撰写的关于此实现的优秀文章：
尝试了第1个选项，但showSearch未定义<代码>//Header render（）{const{showSearch}=this.props.route；console.log（showSearch）；return（//…其他组件{showSearch？：null}）；}

oops-正在获取错误的路由。。。这会有用的，谢谢！