How to use react router v6 in chrome extension?

Question

please explain this in detail. I am using the below code for routing but I am not getting any component rendered on screen. my screen is blank.

This is my GitHub link for detailed code structure. https://github.com/nadimakhtar97/tatkal-extension

This is 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

This is 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

You can use MemoryRouter instead of BrowserRouter