Как использовать React Router на странице расширения Chrome

Question

Я пишу расширение для браузера, в котором есть приложение для панели инструментов и приложение для веб-страницы. Панель инструментов - это бит, который выпадает из значка расширения в браузере, и когда вы нажимаете одну из опций, она вызывает window.open с URL-адресом, полученным из chrome.runtime.getURL

import React from 'react';
import PropTypes from 'prop-types';

const openPage = to => {
  const base = 'webpage/index.html';
  const url = to ? `${base}#${to}` : base;
  const extensionUrl = chrome.runtime.getURL(url);

  return () => {
    window.open(extensionUrl, '_blank');
  };
};

const Button = ({ type, label, to }) =>
  type === 'link' ? (
    <a href="#" onClick={openPage(to)}>
      {label}
    </a>
  ) : (
    <button onClick={openPage(to)}>{label}</button>
  );

на моей веб-странице. Приложение (полностью отдельное приложение для приложения панели инструментов) Я пытаюсь использовать React Router (react-router-dom версия 5.1.2) для управления маршрутизацией в различные разделы приложения.

import React from 'react';
import { MemoryRouter as Router, Switch, Route } from 'react-router-dom';

import AboutPage from './pages/AboutPage';
import HomePage from './pages/HomePage';

import './App.less';

const App = () => (
  <Router>
    <Switch>
      <Route path="#about">
        <AboutPage />
      </Route>
      <Route path="">
        <HomePage />
      </Route>
    </Switch>
  </Router>
);

У меня также есть пробовал HashRouter и BrowserRouter.

Увы, независимо от того, что я пробовал до сих пор, когда маршрут, к которому осуществляется переход, равен chrome-extension://blablahmyextensionsid/webpage/index.html#about, приложение веб-страницы всегда отображает компонент HomePage.

Что я делаю не так?