I'm not expert in reactjs so I'm sorry if this problem seems trivial.
I was ok with <a> tag as my components were rendering. Since I put <Link>, my components are not being rendered though the URL get changed. Any kind of help will be appreciated.
Here is my current state.
App.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;
Product.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 Product
Note that, Currently I'm using react-router-dom V5.2.0
<Link to={} /> only seems works when accessed within the router, if outside of router you would be better off just using <a href={} />.
I have been struggling with the same thing myself before.
When is say within the router I mean something like this:
<Router>
<head>
<Link to={"/products"}>Products</Link>
</head>
<Routes>
<Route path={"/products"} element={<Products/>} />
</Routes>
</Router>
If react router dom version 5. You have to do like this as shown below. It's my setup. I think Switch is also missing in your 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>