Estoy tratando de construir una extensión de Chrome usando reactjs y me di cuenta de que la ruta no funciona como se esperaba,

Lo que estoy tratando de hacer es lo siguiente:

• agregar un botón que tenga un evento de clic
• al hacer clic en el botón se debe abrir la página de inicio de sesión dentro de una ventana emergente usando window.open
• use Route do definió qué componente debe abrirse dentro de la ventana emergente

este es mi codigo

 /* eslint-disable react/jsx-no-undef */ /* eslint-disable no-undef */ /*global chrome*/ import React from "react"; import { Router, Route, Routes, Link } from 'react-router-dom'; import { createBrowserHistory } from "history"; import login from "./login"; class App extends React.Component { popupwindow = (url, title, w=500, h=500) => { var left = screen.width / 2 - w / 2; var top = screen.height * 0.1; return window.open( url, title, "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=" + w + ", height=" + h + ", top=" + top + ", left=" + left ); } render() { const history = createBrowserHistory(); return ( <div> <button onClick={()=>this.popupwindow(chrome.runtime.getURL("/login"),"login")}>Twitter</button> <Router location={history.location} navigator={history}> <div> <Routes> <Route path="/" exact element={<login />} /> <Route path="/login" exact element={<login />} /> </Routes> </div> </Router> </div> ); } }; export default App;

captura de pantalla

mi manifiesto ya contiene esta sección

 "web_accessible_resources": [{ "resources": ["*.png"], "matches": ["<all_urls>"] }, { "resources": ["*.html"], "matches": ["<all_urls>"] }, { "resources": ["*.js"], "matches": ["<all_urls>"] }],

Alguien sabe cómo resolver esto? gracias