Component not rendering after using though the URL gets changed

Question

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

score 0 · Answer 1 · answered May 31 '22 at 10:14

<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>

me at stackoverflow · Answer 2 · 2022-05-31T10:17:15.763

0

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>

edited May 31 '22 at 10:17

answered May 31 '22 at 10:16

me at stackoverflow

43
1
8

I'm sorry to say, it doesn't work for me. I wrapped the `Route`s in `Switch`, but in vain. – Samiul Islam Shibly May 31 '22 at 10:29
Have you checked this in your code. – me at stackoverflow May 31 '22 at 10:34
Also this will work only if you have installed version 5.2.0 – me at stackoverflow May 31 '22 at 10:36
Yes brother, I have already checked this. But nothing fruitful. – Samiul Islam Shibly May 31 '22 at 10:37
My version is exactly 5.2.0 – Samiul Islam Shibly May 31 '22 at 10:39
Sorry my bad. Try adding like this } /> – me at stackoverflow May 31 '22 at 10:41
in your case-> } /> – me at stackoverflow May 31 '22 at 10:42
Nothing new. I'm think I should change the version. – Samiul Islam Shibly May 31 '22 at 10:45
Can you share your project in code.sandbox? – me at stackoverflow May 31 '22 at 10:47

Component not rendering after using though the URL gets changed

2 Answers2