No puedo resolver por qué no funciona. Cuando hago clic en el enlace nueva página, la URL cambia pero la página no (debería cambiar a una nueva página con div con algo de contenido de la nueva página). Tengo que actualizarlo y luego el componente cambia correctamente.

versión

 "react-dom": "^18.1.0", "react-router-dom": "^5.3.1",

Aplicación.js

 import React, { Component } from 'react'; import './App.css'; import HomePage from './components/HomePage'; import New from './components/NewComponents'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; function App() { return ( <div className="App"> <BrowserRouter> <Switch> <Route exact path="/" component={HomePage}> </Route> <Route patch="/new" component={New}> </Route> </Switch> </BrowserRouter> </div> ); } export default App;

Página de inicio.js

 import React, { Component } from 'react'; import { Link } from 'react-router-dom'; const HomePage = () => { return ( <div> <h1>home page</h1> <Link to="/">home page</Link> <h1>new page</h1> <Link to="/New">new page</Link> </div> ) } export default HomePage;

NuevoComponente.js

 import React, { Component } from 'react'; import { Link } from 'react-router-dom'; const New = () => { return ( <div> <h1>some content of the new page</h1> <Link to="/">home</Link> </div> ) } export default New;