React Router double slash after rendering the Link component

I just created a react app using create-react-app and this is my code:

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;

But it renders the a tag get doubles slash and every time that I click on any link it put another slash on the URL.

[Updated]Here how its look like after I clicked a few times:

But if I instead clicking in the link type the exactly the right URL it works. How can I fix this? And why this is happing cause I just copy it from the documentation.