React-router - hide component from main URL? - reactjs

Question

I have this router:
ReactDOM.render((
<Router>
<div>
<Route path="/" component={Auth} />
<Route path="/register" component={RegisterForm} />
<Route path="/login" component={LoginForm} />
</div>
</Router>
), document.getElementById('app'));
And that's the auth component:
class Auth extends React.Component {
render() {
return (
<section className="auth">
<header>
<h2>Login / Register</h2>
</header>
<ul className="auth__list">
<li className="button auth__button"><Link to="/login">Login</Link></li>
<li className="button auth__button"><Link to="/register">Register</Link></li>
</ul>
</section>
);
}
}
When I go to http://my-project/ it shows Auth component.
But when I click on "Register" or "Login" links it's showing "RegisterForm" or "LoginForm" components below the Auth component, while in my opinion /register should show only RegisterForm and /login should show only /LoginForm.
My question is:
why is the "Auth" component being rendered on /register and /login by default?
what's the best way to get rid of it on these pages?
Unfortunately react-router's webpage doesn't help, because they stick navigations above every example and it's confusing to me :(
Thanks a lot.
UPDATE
That's how I import the router, maybe that's the issue?
import React from 'react';
import ReactDOM from 'react-dom';
(...)
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'