React-router v4 showing multiple routes at once

I am having an issue where my routing using react-router-dom is showing all routes at once. So when I render my App component and the start that contains the Routing, I am seeing the pages for each route on top of each other. So it looks like this:

Sooo to begin how this is all kicking off, this is my index.jsx that is rendering the App component on the page:

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

In my App Component, the routing is set up as so:

// 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;

This is my Login/Home component (The Home component is the exact same just replacing Login):

// 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;

I also noticed that when I navigate to http://localhost:9999/home I am getting this error also:

Something is apparently wired incorrectly, and I am a little confused by the documentation with the different versions existing. And advice on how to get this fixed is greatly appreciated!