Acabo de empezar a construir este proyecto de carrito de compras. y puedo mostrar bien los componentes cuando cambio manualmente la URL, pero cuando agrego el elemento Enlace a la navegación, mi aplicación deja de funcionar. ¿Por qué está pasando eso?

Quiero mostrar los diferentes componentes cuando se hace clic en ellos.

Cuando agrego el Elemento de enlace a la barra de navegación, aparece el siguiente error en la consola:

The above error occurred in the <Link> component

Uncaught Error: useHref() may be used only in the context of a <Router> component.

 import React from "react"; import { Link } from 'react-router-dom' function Nav () { return ( <nav> <h3>Logo</h3> <ul> <Link to="/home"> <li>Home</li> </Link> <Link to="/shop"> <li>Shop</li> </Link> <Link to="/cart"> <li>Cart</li> </Link> </ul> </nav> ) } export default Nav;

 import React from 'react'; import {BrowserRouter, Route, Routes} from 'react-router-dom'; import Home from './components/main/Home' import Cart from './components/main/Cart' import Shop from './components/main/Shop' import About from './components/main/About' function RouteSwitch() { return ( <BrowserRouter> <Routes> <Route path='/' exact element={<Home />} /> <Route path='/shop' element={<Shop />} /> <Route path='/about' element={<About />} /> <Route path='/cart' element={<Cart />} /> </Routes> </BrowserRouter> ); } export default RouteSwitch;

 import './App.css'; import React from 'react'; import RouteSwitch from './RouteSwitch'; import Nav from './components/Nav' import Footer from './components/Footer'; function App() { return ( <div> <Nav/> <RouteSwitch /> <Footer/> </div> ); } export default App;