لماذا لا يعمل <link> لذي في React-Router-Dom v4.1.1

كنت قبل استعمل نسخه اقدم من react router وكان كل شيء يعمل جيد استطيع ان احدث الصفحه كما اريد وبدون اي مشاكل. الان بعد التحديث الى اخر نسخه وجهة مشاكل حيث عندما اذهب الى /login عن طريق كتابت الرابط يعمل router ولكن عندما اضغط على لا يعمل الراوتر. هذا الكود الخاص بيه :

Index.js

import React from "react";
import ReactDOM from "react-dom";
import Main from "./pages/index/main.js";
import Login from "./pages/signin/signin.js";
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
ReactDOM.render(
  <div>
    <Router>
      <Switch>
        <Route exact  path="/" render={()=> <Main />}/>
        <Route path="/login" render={()=> <Login />}/>
      </Switch>
    </Router>
  </div>,
  document.getElementById("root")
);

Header.JS

import React from "react";
import style from "./../acc/css/navbar.css";
import { BrowserRouter as Router, Link} from "react-router-dom";
export default class Header extends React.Component {
    render() {
        return (
            <Router>
    <section className={style.nav} id="nav">
            <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/login">Login</Link></li>
            </ul>
        </section>
        </Router>
        );
    }
}

نشرت السؤال على Stockoverflow ايضا مع تفاصيل اكثر يمكنك قرائتها هنا

اي افكار ؟