React Component Mounting дважды

Внутри небольшой части моего приложения React/Redux/ReactRouterV4 у меня есть следующая иерархия компонентов:

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

В дочерних элементах Exhibit есть около 6 различных возможных маршрутов, которые также могут быть отображены. Не волнуйтесь, я объясню с кодом.

Вот мой компонент Parent Exhibit:

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 class ExhibitOne extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { match } = this.props

    return (
      <div className="exhibit-one">
        <Switch>
          <Route path={`${match.url}/wall-one`} component={ExhibitHOC(WallOne)} />
          <Route path={`${match.url}/wall-two`} component={ExhibitHOC(WallTwo)} />
          <Route path={`${match.url}/wall-three`} component={ExhibitHOC(WallThree)} />
          <Route path={`${match.url}/wall-four`} component={ExhibitHOC(WallFour)} />
          <Route path={`${match.url}/wall-five`} component={ExhibitHOC(WallFive)} />
          <Route path={`${match.url}/wall-six`} component={ExhibitHOC(WallSix)} />
        </Switch>
      </div>
    )
  }
}

Чтобы сократить набор текста, я решил обернуть компоненты в компонент более высокого порядка, целью которого является отправка действия, которое установит правильное фоновое изображение в родительском компоненте Exhibit верхнего уровня.

Это компонент высшего порядка:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions/wall-background-image'

export default function(ComposedComponent) {
  class ExhibitHoc extends Component {

    componentDidMount = () => this.props.setBackgroundImage(`./img/exhibit-one/${this.getWall()}/bg.jpg`)

    getWall = () => {
      // this part isnt important. it is a function that determines what wall I am on, in order to set
      // the proper image.
    }

    render() {
      return <ComposedComponent />
    }
  }

  return connect(null, actions)(ExhibitHoc);
}

При начальной загрузке ExhibitOne я вижу, что создатель действия setBackgroundImage выполняется дважды, взглянув на Redux Logger в консоли. Первоначально я склонялся к использованию componentDidMount, потому что я думал, что его использование ограничит создателя действия выполнением только один раз. Вот скриншот журнала:

Я думаю, что могу неправильно понять, как работают компоненты высшего порядка, или, может быть, это что-то вроде React Router V4? В любом случае, любая помощь будет принята с благодарностью относительно того, почему это выполняется дважды.