React-router - 从主URL隐藏组件？

Question

我有这个路由器：

ReactDOM.render((
  <Router>
    <div>
      <Route path="/" component={Auth} />
      <Route path="/register" component={RegisterForm} />
      <Route path="/login" component={LoginForm} />
    </div>
  </Router>
  ), document.getElementById('app'));

那是auth组件：

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>
    );
  }
}

当我转到http://my-project/时，它会显示Auth组件。

但是当我点击“注册”或“登录”链接时，它会在Auth组件下面显示“RegisterForm”或“LoginForm”组件，而在我看来/ register只显示RegisterForm和/ login应该只显示/ LoginForm。

我的问题是：

• 为什么默认情况下会在/ register和/ login上呈现“Auth”组件？
• 在这些页面上摆脱它的最佳方法是什么？

不幸的是，反应路由器的网页没有帮助，因为它们在每个示例上面都有导航功能，这让我感到困惑:(

非常感谢。

更新

这就是我导入路由器的方式，也许这就是问题？

import React from 'react';
import ReactDOM from 'react-dom';
(...)

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'