やりたいこと

Rails側で複数のページを用意する

<div id="header"></div>
<div id="content"></div>

このidによってReactの何を表示するか変えたい。

試したこと

ReactDOM.render(
  <Provider store={store}>
    <Header />
  </Provider>,
  document.querySelector('#header')
);
ReactDOM.render(
  <Provider store={store}>
    <Content />
  </Provider>,
  document.querySelector('#content')
);

このようにすると、#contentがないページなどではエラーが出たため、以下のように変更

if (document.getElementById("header") != null) {
  ReactDOM.render(
    <Provider store={store}>
      <Header />
    </Provider>,
    document.querySelector('#header')
  );
};
if (document.getElementById("content") != null) {
  ReactDOM.render(
    <Provider store={store}>
      <Content />
    </Provider>,
    document.querySelector('#content')
  );
};

このようにするとProviderが複数個できてしまうので、Providerの中をIDごとに出し分けたいです。
ご教授いただけるとありがたいです、よろしくお願いします。