Javascript MemoryRouter不处理在阴影dom中呈现的react应用程序中的路由

我已经用React创建了一个chrome扩展。 此扩展向dom添加一个div，向其附加一个阴影dom，并在阴影dom的子div中呈现react页面。react页面呈现良好，其样式与网页的其余部分隔离

dom中的结构如下所示：

这里的问题是，我无法使用MemoryRouter（来自react router dom）在页面之间导航。 事实上，它会生成指向

/

和

/app/dashboard

的链接，因此当我转到

stackoverflow.com

并打开扩展时，当我单击按钮时，我会重定向到

stackoverflow.com/

或

stackoverflow.com/app/dashboard

，而不是MemoryRouter中定义的页面

有什么办法解决这个问题吗？ 提前感谢

App.tsx

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

import LoginPage from 'pages/login';
import MaintenancePage from 'pages/maintenance';
import Layout from 'app/ui/Layout';

const App = () => {
  return (
    <Router>
      <Layout>
        <Switch>
          <Route exact path="/" component={MaintenancePage} />
          <Route exact path="/app/dashboard" component={LoginPage} />
        </Switch>
      </Layout>
    </Router>
  );
};

export default App;

从“React”导入React；
从“react Router dom”导入{MemoryRouter as Router，Route，Switch}；
从“页面/登录”导入登录页面；
从“页面/维护”导入维护页面；
从“应用程序/用户界面/布局”导入布局；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

Layout.tsx

import React, { ReactNode } from 'react';
import { Button } from 'antd';
import { Link } from 'react-router-dom';

import logo from 'img/logo.png';
import styles from './Layout.module.css';

interface Props {
  children: ReactNode;
}

const Layout = ({ children }: Props) => (
  <>
    <div className={styles.appbar}>
      <Link to="/">
        <Button type="primary">Root</Button>
      </Link>
      <Link to="/app/dashboard">
        <Button type="primary">Dashboard</Button>
      </Link>
      <div className={styles.icon}>
        <img src={logo} alt="Logo" />
      </div>
    </div>
    <div className={styles.content}>{children}</div>
  </>
);

export default Layout;

import React，{ReactNode}来自“React”；
从“antd”导入{Button}；
从'react router dom'导入{Link}；
从“img/logo.png”导入徽标；
从“/Layout.module.css”导入样式；
界面道具{
子节点：反应节点；
}
常量布局=（{children}:Props）=>(
根
仪表板
{儿童}
);
导出默认布局；