Use react router in chrome extention

Question

I try to use react router in a chrome extention. When I use it on a normal webpage (localhost:3000) it works fine but when I build it and try it as a chrome extention it doesn't work.

Yeah I looked for solutions and found them but no one of then working for me.

This is my code:

App.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;

Routers.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;

Login.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;