Estoy intentando usar React Router para permitir que un botón en mi NavBar cambie la vista cuando se hace clic en un botón. Específicamente, quiero un botón "Cargar" para cambiar la URL a /cargar y representar el componente UploadPage .

Actualmente, la URL cambiará, pero la vista no se procesa automáticamente y el componente "antiguo" aún está visible. Necesito volver a cargar manualmente la página o ir directamente a la URL para que se cargue la vista. ¿Cómo puedo detener este comportamiento para que se renderice automáticamente sin recarga manual?

Aplicación.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 (Este es un fragmento de solo el botón en la barra de navegación)

 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;