React Router v4 not rendering component in route w/ parameters

Question

I am doing a project on an ecommerce site and currently have the correct routes set up for the home page at "/" and for the product list page at "/:id". I am trying to get a route set up for a single product page however, react-router does not render my component at all.

Index.js

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>), document.getElementById('root'));
  registerServiceWorker();

App.js

<Switch>
  <Route exact path="/" render={()=> apiDataLoaded ? <HomeLayout data={data}/> : <div>Loading...</div>}/>
  <Route path="/:id" render={(props)=> <ProductListLayout {...props} />} />
</Switch>

Listing Component

return (
  <Switch>
    <div className="product-list-item-card">
      <div className="product-list-item-img" style={bgImage}></div>
      <div className="product-list-item-content">
        <div className="product-list-item-overlay">
          <Link to={`/products/${id}`}>
              <DetailsBtn />
          </Link>
        </div>
        <h3>{name}</h3>
        <h6>{brand}</h6>
        <span>${msrp}</span>
        <p>${sale}</p>
      </div>
    </div>
    <Route path={'/products/:product_id'} render={()=> <div>Product Page</div>}/>
  </Switch>
)}

In the listing component above, when I clock on the link, the url is the only thing that changes? Any ideas as to what I'm doing wrong? Thanks.

SOLVED

Changing the order of the routes in App.js was only part of the solution. I also moved my route from the Listing component into App.js at the top of the order of the routes and now it works!

New App.js

<Switch>
  <Route path={`/products/:product_id`} component={ProductLayout} />
  <Route path="/:id" render={(props)=> <ProductListLayout {...props} />} />
  <Route exact path="/" render={()=> apiDataLoaded ? <HomeLayout data={data}/> : <div>Loading...</div>}/>
</Switch>

Mayur Babaria · Accepted Answer · 2018-05-02 07:44:14Z

2

you need to change only position on your current routes...

<Switch>
 <Route path="/:id" key={1} render={(props)=> <ProductListLayout 
   {...props} />} />
 <Route exact path="/"  key={1} render={()=> apiDataLoaded ? 
   <HomeLayout data= . 
   {data}/> : <div>Loading...</div>}/>
</Switch>

answered May 2, 2018 at 7:44

Mayur Babaria

561 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Himanshu Gupta · Accepted Answer · 2020-01-08 07:52:33Z

0

Remove switch and use div inside ProductListLayout component

ProductListLayout.js

const ProductListLayout = () => {
  return (
    <div>
      <div className="product-list-item-card">
        <div className="product-list-item-img"></div>
        <div className="product-list-item-content">
          <div className="product-list-item-overlay">
            <Link to={`/products/${99999}`}>
              Click here
            </Link>
          </div>
          <h3>{name}</h3>
        </div>
      </div>
      <Route exact path={`/products/:product_id`} render={()=> <div>Product Page</div>}/>
    </div>
  );
}

Click here for more detail

edited Jan 8, 2020 at 7:52

answered May 2, 2018 at 2:53

Himanshu Gupta

4405 silver badges18 bronze badges

Collectives™ on Stack Overflow

React Router v4 not rendering component in route w/ parameters

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related