Javascript 渲染链接组件后使用双斜杠

我刚刚使用create react app创建了一个react app，以下是我的代码：

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;

import React，{Component}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
//从“/components/Navigation”导入导航；
常量Home=（）=>Home；
const Profile=（）=>Profile；
const Auth=（）=>登录；
常量导航=（）=>(
家
登录
轮廓
);
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

但是它会将

标记变成一个双斜杠，每次我点击任何链接时，它都会在URL上再加一个斜杠

[更新]这里是我点击几次后的样子：


但是如果我改为点击链接，键入正确的URL，它就会工作。我怎样才能解决这个问题？为什么会发生这种情况，因为我只是从文档中复制了它。
您是否尝试添加到元素的精确属性？我已经检查了您的代码并多次运行，它运行正常，即使我也没有收到您提到的错误。检查这个：-它在节点v8.11.2、npm v6.4.1、react v16.6.3、“react router dom v4.3.1”上运行良好，无法重现问题我只是用gif更新了问题，说明它是如何发生在我身上的，我看到了codesandbox，对我来说毫无意义。我将尝试创建另一个项目，看看是否会遇到同样的问题。我下载了代码sandbox代码并运行了它，它成功了。谢谢@VikasSingh