Error: <Route> elements are for router configuration only and should not be rendered in react-router v4

Tried to upgrade react-router from 2 to 4 and broke it and now cant render my app.

getting various errors (the most recent is: <Route> elements are for router configuration only and should not be rendered)

I have also had the error where my ./ route renders fine but every other route blows up when I refresh and says Cannot GET /randomRoute

I am creating a react app and my main index.js file (where I include ReactDOM.render) also includes the routes and looks like so:

import React from 'react';
import ReactDOM from 'react-dom';
import { Route } from 'react-router';
import { BrowserRouter as Router, Match, HashRouter } from 'react-router-dom'
import Header from './components/header';


import './index.scss';


class App extends React.Component {

  render() {
    return (
      <Router  history={HashRouter}>
        <div>
          <Route path={"/"} component={Header} />
        </div>
      </Router>
    );
  }
}

ReactDOM.render(<App />,
    document.getElementById('content'));

why would I be getting that current error and can anyone give me a simple start to the basics I need to include just to get routing working? it worked in version 2 but I wanted to upgrade and now cant get it working again