Реагировать на двойной слеш после рендеринга компонента Link

Question

Я только что создал приложение реагирования, используя create-Reaction-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;

Но он отображает тег a, получая двойную косую черту, и каждый раз, когда я нажимаю на любую ссылкуэто добавило еще одну косую черту в URL.

[Обновлено] Вот как это выглядит после того, как я нажал несколько раз:

Но если я вместо этого нажимаю на ссылку, введите правильный URL-адрес, он будет работать.Как я могу это исправить?И почему это происходит, потому что я просто скопировал это из документации.