Объединение двух неупорядоченных списков из разных компонентов (BrowserRouter с не-BrowserRouter компонентами)

Question

Я создал панель навигации, используя неупорядоченный список компонентов NavLink в реакции-маршрутизаторе, и я использую BrowserRouter для маршрутизации к различным компонентам и рендеринга в div на той же странице. Проблема в том, что я хочу создать компонент логотипа вне BrowserRouter, который перенаправляет на целевую страницу, которую я создал, будучи частью самой панели навигации. Я приведу пример ниже:

<div>
    <ul className="header">
    <li><Route component={Logo} /></li>
    </ul>
    <BrowserRouter>
      <div>
        <ul className="header">
          <li><NavLink exact to="/page1">Page 1</NavLink></li>
          <li><NavLink to="/page2">Page 2</NavLink></li>
          <li><NavLink to="/page3">Page 3</NavLink></li>
        </ul>

        <div className="content">
          <Route exact path="/page1" component={Page1} />
          <Route path="/page2" component={Page2} />
          <Route path="/page3" component={Page3} />
        </div>
      </div>
    </BrowserRouter>
  </div>

Компонент "Логотип" - это просто изображение, которое направляется на "/" или на родительскую / целевую страницу. Мне нужна помощь, чтобы выяснить, как я могу объединить 2 класса заголовков (один, содержащий компонент Logo и другой, содержащий ссылки NavLinks на 3 страницы) и поддерживать его как единую панель навигации. Спасибо.