相关疑难解决方法(0)

在我的React / Redux / ReactRouterV4应用程序的一小部分中，我具有以下组件层次结构，

- Exhibit (Parent)
-- ExhibitOne
-- ExhibitTwo
-- ExhibitThree

在展览的孩子中，也可以绘制大约6种不同的可能路线。不用担心，我将用一些代码进行解释。

这是我的家长展览组件：

export class Exhibit extends Component {
  render() {
    const { match, backgroundImage } = this.props

    return (
      <div className="exhibit">
        <Header />
        <SecondaryHeader />

        <div className="journey"
          style={{
            color: 'white',
            backgroundImage: `url(${backgroundImage})`,
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center-center'
          }}>

          <Switch>
            <Route path={`${match.url}/exhibit-one`} component={ExhibitOne} />
            <Route path={`${match.url}/exhibit-two`} component={ExhibitTwo} />
            <Route path={`${match.url}/exhibit-three`} component={ExhibitThree} />
            <Redirect to="/" />
          </Switch>
        </div>
      </div>
    )
  }
}

基本上，它所做的全部工作就是显示一个展览子组件，并设置背景图像。

这是ExhibitOne子组件之一：

export default …