I'm attempting to use React Router to allow a button in my NavBar to change the view when a button is clicked. Specifically, I want an "Upload" button to change the URL to /upload and render the UploadPage component.

Currently, the URL will change, but the view does not automatically render, and the 'old' component is still visible. I need to manually reload the page or go to the URL directly for the view to load. How can I stop this behaviour so that it automatically renders without manual reload?

App.js:

import { Component } from "react";
import Home from "../src/components/Component/Home/Home";
import Header from "./components/Component/Header/Header";
import UploadPage from "./components/Component/VideoUpload/VideoUpload";
import { BrowserRouter, Switch, Route } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Header />
        <Switch>    
          <Route path="/" exact component={Home} />
          <Route
            path="/video/:videoId"
            component={Home}
            render={(routerProps) => <Home {...routerProps} />
          />
          <Route path="/upload" component={UploadPage} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

Header.js (This is a snippet of just the button in the NavBar)

import { Link } from "react-router-dom";

const Header = () => {
    return (
        //NavBar code here...

        <Link to="/upload">
        <button>
            <img draggable="false" src={uploadIcon} alt="upload-icon" />
            UPLOAD
        </button>
        </Link>
    );
};

VideoUpload.js

import React from "react";

const VideoUpload = () => {
  return (
    <section className="uploadContainer">
      <section className="uploadContainer__titleContainer">
        <h2 className="uploadContainer__title">Upload Video</h2>
      </section>
    </section>
  );
};

export default VideoUpload;