MemoryRouter不处理阴影dom中渲染的react应用程序中的路由

问题描述

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

dom中的结构如下：

这里的问题是我无法在带有MemoryRouter的页面之间导航（来自react-router-dom）。 实际上，它会生成指向/和/app/dashboard的链接，因此当我打开stackoverflow.com并打开扩展名时，当我单击按钮时，我将重定向到stackoverflow.com/或{{ 1}}，而不是MemoryRouter中定义的页面。

有解决这个问题的主意吗？ 预先感谢

App.tsx

stackoverflow.com/app/dashboard

Layout.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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）