反應路由器v4一次顯示多條路線

我遇到了一個問題，即使用react-router-dom的路由一次顯示所有路由。所以當我渲染我的應用程序組件和包含路由的開始時，我會看到每個路由的頁面在彼此之上。所以它看起來像這樣：反應路由器v4一次顯示多條路線

的sooo開始這是怎麼踢了，這是我的index.jsx被顯示在網頁上的應用程序組件：

// Dependencies 
import React from 'react'; 
import ReactDOM from 'react-dom'; 

// Components 
import App from './components/app.jsx'; 

// Styles 
import './index.scss'; 

const container = document.getElementById('main'); 

ReactDOM.render(<App />, container);

在我應用程序組件，路由設置爲這樣：

// Dependencies 
import React from 'react'; 
import { BrowserRouter as Router, Route, Match, Miss } from 'react-router-dom'; 

// Components 
import Login from './pages/login/login.jsx'; 
import Home from './pages/home/home.jsx'; 

// Styles 
import './app.scss'; 

const App =() => { 
    return (
    <Router> 
     <div> 
      <Route exact pattern='/' component={Login}/> 
      <Route exact pattern='/home' component={Home}/> 
     </div> 
    </Router> 
); 
}; 

export default App;

這是我的登錄/主頁組件（歸屬組件是完全一樣的只是更換登錄）：

// Dependencies 
import React from 'react'; 

// Styles 
import './login.scss'; 

class Login extends React.Component { 
    render() { 
    return (
     <div className="content"> 
     <div className='title'> 
      Login Page 
     </div> 
     </div> 
    ); 
    } 
} 

export default Login;

我還注意到，當我瀏覽到http://localhost:9999/home我也收到此錯誤：