Использовать реагирующий маршрутизатор в chrome расширении

Question

Я пытаюсь использовать реагирующий маршрутизатор в chrome расширении. Когда я использую его на обычной веб-странице (localhost: 3000), он работает нормально, но когда я собираю его и пробую как расширение chrome, он не работает.

Да, я искал решения и нашел их, но тогда никто не работал на меня.

Это мой код:

Приложение. js

import React, { Component } from "react";

import "./App.css";

import Routers from "./Routers.js";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Routers />
      </div>
    );
  }
}

export default App;

Маршрутизаторы. js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import "./App.css";

import Login from "./Login.js";
import Main from "./Main.js";



class Routers extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route path="/main" component={Main} />
        </Switch>
      </Router>
    );
  }
}

export default Routers;

Вход. js

import React, { Component } from "react";
import { Link } from "react-router-dom";

import "./Login.css";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      room: ""
    };
  }

  render() {
    return (
      <div className="joinOuterContainer">
          <input onChange={event => this.setState({ name: event.target.value })} />
          <input onChange={event => this.setState({ room: event.target.value })} />
          <Link to={`/main?name=${this.state.name}&room=${this.state.room}`}>
            <button type="submit">
              Sing In
            </button>
          </Link>
      </div>
    );
  }
}

export default Login;