No soy experto en reactjs, así que lo siento si este problema parece trivial.
Estaba bien con la etiqueta <a> ya que mis componentes se estaban renderizando. Desde que puse <Link> , mis componentes no se procesan aunque la URL cambia. Cualquier tipo de ayuda será apreciada.
Aquí está mi estado actual.
Aplicación.js
import { Container } from 'react-bootstrap'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import './bootstrap.min.css'; import Footer from "./components/Footer"; import Header from "./components/Header"; import HomePage from './pages/HomePage'; import ProductPage from './pages/ProductPage'; function App() { return ( <Router> <Header /> <main> <Container className='py-3'> <Route path='/' component={HomePage} exact /> <Route path='/product/:id' component={ProductPage} /> </Container> </main> <Footer/> </Router> ); } export default App;Producto.js
import React from 'react' import { Card } from 'react-bootstrap' import '../index.css' import Rating from './Rating' import { Link} from 'react-router-dom' function Product({product}) { return ( <Card className='my-3 p-3 rounded'> <Link to={`/product/${product._id}`}> <Card.Img src={ product.image}/> </Link> <Card.Body> <Link to={`/product/${product._id}`}> <Card.Title as="div"> <strong>{ product.name }</strong> </Card.Title> </Link> <Card.Text as='div'> <div className='my-3'> <Rating value={product.rating} text={`${product.numReviews} reviews`} color={ '#fcfc03' }/> </div> </Card.Text> <Card.Text as='h3'> ${ product.price} </Card.Text> </Card.Body> </Card> ) } export default ProductTenga en cuenta que actualmente estoy usando react-router-dom V5.2.0
<Link to={} /> solo parece funcionar cuando se accede dentro del enrutador, si fuera del enrutador sería mejor usar <a href={} /> .
He estado luchando con lo mismo antes.
Cuando se dice dentro del enrutador me refiero a algo como esto:
<Router> <head> <Link to={"/products"}>Products</Link> </head> <Routes> <Route path={"/products"} element={<Products/>} /> </Routes> </Router>Si react router dom version 5 . Tienes que hacer esto como se muestra a continuación. Es mi configuración. Creo que Switch también falta en su import .
import { BrowserRouter, Switch, Route } from "react-router-dom"; <BrowserRouter> <Header /> <Switch> <Route path="/" exact component={Homepage} /> <Route path="/products" component={Index} /> <Route path="/:productID" children={<ProductDetail />} /> <Route path="/checkout" component={Checkout} /> <Route path="/account" component={Account} /> <Route path="*" component={PageNotFound} /> </Switch> <Footer /> </BrowserRouter>