React-Router changing url but not refreshing/loading component?

Question

I'm a little stuck and having read a dozen others solutions mine still doesn't seem to work. My Links from react router change the url fine, but doesn't load any different component, unless I do a manual refresh. I also added withRouter to all my components with Routes/Links but still no go. Here is the code

StreamList.js

import {
  connect
} from 'react-redux';
import {
  fetchStreams
} from '../../actions';
import React, {
  Component
} from 'react';
import streams from '../../apis/streams';
import {
  Link,
  withRouter
} from 'react-router-dom';


class StreamList extends Component {
  componentDidMount() {
    this.props.fetchStreams();
  }

  renderAdmin(stream) {
    if (stream.userId === this.props.currentUserId) {
      return ( <
        div className = 'right floated content' >
        <
        button className = 'ui button primary' > Edit < /button> <
        button className = 'ui button negative' > Delete < /button> <
        /div>
      )
    }
  }

  renderList() {
    return this.props.streams.map(stream => {
      return ( <
        div className = 'item'
        key = {
          stream.id
        } > {
          this.renderAdmin(stream)
        } <
        i className = 'large middle aligned icon camera' / >
        <
        div className = 'content' > {
          stream.title
        } <
        div className = 'description' > {
          streams.description
        } <
        /div> <
        /div> <
        /div>
      )
    })
  }

  renderCreate(stream) {
    if (this.props.isSignedIn) {
      return ( <
        div style = {
          {
            textAlign: 'right'
          }
        } >
        <
        Link to = "/streams/new"
        className = "ui button primary" >
        Create Stream <
        /Link> <
        /div>
      );
    }
  }

  render() {
    return ( <
      div >
      <
      h2 > Streams: < /h2> <
      div className = 'ui celled list' > {
        this.renderList()
      } <
      /div> {
        this.renderCreate()
      } <
      /div>
    )
  }
}


const mapStateToProps = (state) => {
  return {
    streams: Object.values(state.streams),
    currentUserId: state.auth.userId,
    isSignedIn: state.auth.isSignedIn
  };
};


export default withRouter(connect(mapStateToProps, {
  fetchStreams
})(StreamList));

App.js

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import StreamCreate from './streams/StreamCreate';
import StreamDelete from './streams/StreamDelete';
import StreamEdit from './streams/StreamEdit';
import StreamList from './streams/StreamList';
import StreamShow from './streams/StreamShow';
import Header from './Header';

export default function App() {
    return (
        <div className='ui container'>
            <BrowserRouter>
                <div>
                    <Header />
                    <Route path='/' exact component={StreamList} />
                    <Route path='/streams/new' component={StreamCreate} />
                    <Route path='/streams/edit' component={StreamEdit} />
                    <Route path='/streams/delete' component={StreamDelete} />
                    <Route path='/streams/show' component={StreamShow} />
                </div>
            </BrowserRouter>
        </div>
    )
}

Header.js (nav)

import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import GoogleAuth from './streams/GoogleAuth';

export default withRouter(function Header() {
  return (
    <div className='ui secondary pointing menu'>
        <Link to='/' className='item'>
            Twatch
        </Link>
        <div className='right menu'>
            <Link to='/' className='item'>
                All Streams
            </Link>
            <GoogleAuth />
        </div>
    </div>
  )
});