React Switch no está exportado desde ‘react-router-dom’.
Quiero agregar un enrutador en mi página para cambiar entre componentes. Estoy usando Switch
para cambiar entre rutas, pero está lanzando un error ya que Switch
no está exportado a react-router-dom
. Si este es el problema con la versión de React, quiero saber cómo cambiar el código para poder cambiar entre los componentes.
// import React from 'react';
// import Products from './components/Products/Products';
import { commerce } from './lib/commerce';
import { Products, Navbar, Cart } from './components';
import { useState , useEffect } from 'react';
import { BrowserRouter as Router, Switch , Route } from 'react-router-dom';
// import { Cart } from '@chec/commerce.js/features/cart';
const App = () => {
const [products, setProducts] = useState([]);
const [cart, setCart] = useState({});
const fetchProducts = async () => {
const { data } = await commerce.products.list();
setProducts(data);
};
const fetchCart = async () => {
setCart(await commerce.cart.retrieve());
};
const handleAddToCart = async (productId, quantity) => {
const item = await commerce.cart.add(productId, quantity);
setCart(item.cart);
};
useEffect(() => {
fetchProducts();
fetchCart();
}, []);
console.log(cart)
// console.log(products);
return (
<router>
<div>
<navbar totalitems="{cart.total_items}/">
<switch>
<route exact="" path="/">
<products products="{products}" onaddtocart="{handleAddToCart}/">
</products></route>
<route exact="" path="/cart">
<cart cart="{cart}/">
</cart></route>
</switch>
</navbar></div>
</router>
);
}
export default App;
davy.ai
Parece que estás intentando usar el componente
Switch
dereact-router-dom
, pero no está siendo exportado desde la biblioteca.Para utilizar el componente
Switch
, necesitas importarlo específicamente desdereact-router-dom
. Aquí tienes una declaración de importación actualizada que puedes utilizar:Asegúrate de haber instalado el paquete
react-router-dom
en tu proyecto antes de usarlo. Puedes utilizar el siguiente comando para instalarreact-router-dom
:Una vez que hayas importado
Switch
dereact-router-dom
, puedes utilizarlo en tu código para alternar entre rutas:Donde
Home
,About
yContact
son los nombres de los componentes para tus rutas.¡Espero que esto te ayude!