I am learning router. In a basic project, I am applying routes. But every time I click on a component the page gets reloaded. I don't understand why it is happening.

Here is my codes:

main.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')
);

App.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;

Versions I am using:

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

What is the problem and how can I solve this problem?