React-router v4 showing multiple routes at once

I have a problem where my routing with react-router-dom displays all routes at the same time. So when I create an App component and a start that contains Routing, I go through the pages for each route on top of each other. So it looks like this:

Sooo, to start how it all starts, this is my index.jsx which renders 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 configured like this:

// 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 same as 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 go to http://localhost:9999/home

I also get this error:

Something seems to be related incorrectly and I am a bit confused by the documentation with the existing versions. And advice on how to get this fix is ​​greatly appreciated!