渲染链接组件后，React Router双斜杠

Question

我刚刚使用create-react-app创建了一个react应用，这是我的代码：

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// import Navigation from "./components/navigation";

const Home = () => <div><h1>Home</h1></div>;
const Profile = () => <div><h1>Profile</h1></div>;
const Auth = () => <div><h1>Login</h1></div>;
const Navigation = () => (
  <div>
    <Link to="/">Home</Link>
    <Link to="/auth">Login</Link>
    <Link to="/profile">Profile</Link>
  </div>
);
class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navigation />
          <div>
            <Route exact path="/" component={Home} />
            <Route path="/auth" component={Auth} />
            <Route path="/profile" component={Profile} />
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

但是它使a标签变成双斜杠，并且每次我单击任何链接时，URL上都会再斜杠。

[更新]单击几次后，它的外观如下：

但是，如果我改为单击链接类型，则输入正确的URL，它将起作用。我怎样才能解决这个问题？以及为什么会这样导致原因，我只是从文档中复制了它。