使用反应路由器在路由上设置状态/道具

Question

我对React有些新意.所以请耐心等待我.我有以下基础结构:

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

...在儿童中,一个组件是一个标题,它具有我想要的可选搜索组件:

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

我想要做的是说当我去路线A时,不应该包括搜索组件(或者至少不显示),但是当我去路线B时,它应该.我已经洗了几天,到目前为止还找不到满足这种需求的解决方案.如果重要,我使用ES6/7(babel通过webpack).

我可以在APP中设置状态并按字面意思调整以调整搜索上显示的传递道具,或者显示或不显示它,但无法根据路线动态地弄清楚如何做到这一点.

核心问题是如何告诉App(和间接Header)在某些路由上的Header内部显示搜索组件,而不是在其他路由上.我想'也许我需要中间的某种抽象/包装组件,但我不太确定.欢迎任何或想法.

TIA!

Answer 1

首先设置您的路线.

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

路径将作为属性传递,然后您可以访问该showSearch属性,该属性确定是否呈现搜索组件.

// Header
render() {
  const { showSearch } = this.props.route;

  return (
    <div className='header'>
      // ... other components
      { showSearch ? <Search /> : null }
    </div>
  );
}

也许你不希望你的标题成为顶级组件.在这种情况下,定义一个中间包装器组件,将组件路由向下转发到标头.

<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>
  );
}

或者,您可以从Header组件内部进行快速而脏的检查.

// Header
render() {
  const { hash } = window.location,
        showSearch = /\/foo/.test(hash);

  return (
    <div className='header'>
      // ... other components
      { showSearch ? <Search /> : null }
    </div>
  );
}