React Router рендерит выше нижнего колонтитула?

Question

Можно ли использовать React Router в моем <Footer/> для рендеринга компонентов в моем <App/> компоненте внутри <div>?Прямо сейчас, если я добавлю Route в мой нижний колонтитул, компоненты будут отображаться либо ниже нижнего колонтитула, либо прямо над ним, оставаясь при этом частью нижнего колонтитула.

Мой index.js

ReactDOM.render(
  [<Header/>, <App />, <Footer />],
  document.getElementById("root")
);

My App.js

<div className="content"></div>

My Footer.js (частично)

<footer className="footer">
        <Router>
          <div className="row">
            <div className="column">
              <ul className="no-bullet-list">
                <li>
                  <h2>About us</h2>
                </li>
                <li>
                  <Link to="/whoWeAre" className="text">
                    Who we are
                  </Link>
                </li>
                <li>
                  <Link to="/about" className="text">
                    About
                  </Link>
                </li>
              </ul>
            </div>
              </ul>
            </div>
              </ul>
            </div>
          </div>
          <Route path="/whoWeAre" component={whoWeAre} />
          <Route path="/about" component={about} />
        </Router>
      </footer>

...

function whoWeAre() {
  return <WhoWeAre/>;
}
function about() {
  return <About/>;
}

Очевидно, что при таком подходе WhoWeAre и About отображаются ниже моего нижнего колонтитула.Я открыт для любых идей, даже если это означает, что я должен реструктурировать свои index.js и App.js

Answer 1

Я бы предложил добавить компонент макета приложения.

export const AppLayout = ({ children }) => (
  <div className="container">
    <div className="layout">
      <header>...</header>
      <div className="layout__main">
        <main>{children}</main>
      </div>
      <footer>...</footer>
    </div>
  </div>
);

Затем вы можете использовать его следующим образом:

 <Router history={createBrowserHistory()}>
      <AppLayout>
         ... your routes here
     </AppLayout>
 </Router>

Окончательный результат будет следующим:

• В вашем приложении есть глобальный компонент "макет"
• Внутри компонента макета вы можете определить верхний, основной раздел и нижний колонтитул
• Ваши маршруты будут отображаться как частичные виды внутриосновной контейнер
• Ваши маршруты будут повторно использовать глобальный нижний колонтитул и заголовок