Estoy aprendiendo enrutador . En un proyecto básico, estoy aplicando rutas . Pero cada vez que hago clic en un componente, la página se vuelve a cargar. No entiendo por qué está sucediendo.

Aquí están mis códigos:

principal.jsx

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import 'bootstrap/dist/css/bootstrap.css'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') );

Aplicación.jsx

 import React from 'react'; import Header from './components/Header/Header'; import Shop from './components/Shop/Shop'; import Review from './components/Review/Review.jsx'; import { Routes, Route, Link } from 'react-router-dom'; import { CartProvider } from './contexts/CartContext'; import 'bootstrap/dist/css/bootstrap.css'; function App() { return ( <div> <CartProvider> <Header /> <Routes> <Route path="/" element={<Shop />} /> <Route path="/shop" element={<Shop />} /> <Route path="/review" element={<Review />} /> <Route path="*" element={ <main style={{ padding: '1rem' }}> <p>There's nothing here!</p> </main> } /> </Routes> </CartProvider> </div> ); } export default App;

Versiones que estoy usando:

 "react": "^17.0.2" "react-dom": "^17.0.2" "react-router-dom": "^6.2.2"

¿Cuál es el problema y cómo puedo solucionar este problema?