如何在 Chrome 扩展中使用 React Router v6？

Question

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

这是我的 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'))

Answer 1

您可以使用MemoryRouter代替BrowserRouter