如何在 chrome 扩展中使用 react router v6？答案

【问题标题】：How to use react router v6 in chrome extension?如何在 chrome 扩展中使用 react router v6？
【发布时间】：2022-06-18 16:36:33
【问题描述】：

请详细解释一下。我正在使用以下代码进行路由，但我没有在屏幕上呈现任何组件。我的屏幕是空白的。

这是我的 GitHub 链接，了解详细的代码结构。 https://github.com/nadimakhtar97/tatkal-extension

这是 Layout.js

import { Flex } from '@chakra-ui/react'
import React from 'react'
import Welcome from './Welcome'
import Options from './Options'
import {
    BrowserRouter,
    Routes,
    Route,
} from "react-router-dom";


function Layout() {
    return (
        <Flex>
            <BrowserRouter>
                <Routes>
                    <Route path='/' element={<Welcome />} />
                    <Route path="options" element={<Options />} />
                </Routes>
            </BrowserRouter>
        </Flex>
    )
}

export default Layout

这是 Popup.js

import React from 'react'
import { render } from 'react-dom'
import { Box, ChakraProvider, Heading } from '@chakra-ui/react'
import Layout from './Layout';



function Popup() {

  return (
      <ChakraProvider>
        <Layout />
      </ChakraProvider>
  )
}

render(<Popup />, document.getElementById('root'))

【问题讨论】：

Layout 是否在某处呈现？有没有错误？我没有看到这个特定代码有任何问题。 stackoverflow.com/help/minimal-reproducible-example
yes 正在呈现布局。在 Popup.js 中
我没有在运行codesandbox 中重现您的代码的任何渲染问题，所以我怀疑其他地方有任何问题。你已经用一些与 chrome 扩展相关的标签标记了这篇文章，你能分享你项目的那部分吗？
我已经添加了我的 github 链接 (github.com/nadimakhtar97/tatkal-extension)。您可以克隆它并在您的计算机上查看问题。
扩展没有网络服务器，所以根路径不是/，而是弹出页面的实际文件名。您可以明确指定它或将路由器切换到哈希模式。

标签： reactjs google-chrome google-chrome-extension react-router chrome-extension-manifest-v3

【解决方案1】：

您可以使用MemoryRouter 代替BrowserRouter

【讨论】：