ReactJS: Component is not rendering in Nested Routing

Question

I am using "react-scripts": "4.0.2" and all my components are React Hooks. My logic involves nested routing but the end result is not rendered.

Body.js:

<Switch>
    <Route path="/form" exact component={Forms}></Route>
    <Route path="/" exact component={ShopCards}></Route>
</Switch>

Forms.js:

const expandFormHandler = (pid) => {
console.log("PID:" + pid);           //It is printing correcly
props.history.push({ pathname: "/form/" + pid });  //URL is also changing accordingly
}

return (
<div>
  {prodCards.map((card, index) => (
    <ProductCard
      key={index}
      expand={expandFormHandler.bind(this, card.pid)}
    />
  ))}

  <Route path={props.match.url + "/:id"} exact component={Modal} />
//<Route path="/form/:id" exact component={Modal} />   //Tried this too
</div>
  );

Modal.js:

<h1>{props.match.params.id}Hello</h1>

The modal is not rendering even it's useEffect() is not executed.

Now if I place Modals Route in Body.js like following the Modal is rendered but not in the same page below ProductCard

<Switch>
    <Route path="/form" exact component={Forms}></Route>
    <Route path="/form/:id" exact component={Modal} />
    <Route path="/" exact component={ShopCards}></Route>
</Switch>

Can you clarify what is your goal? You want to show Modal component on the same page with Forms component if url contains :id? — 2u4u
– 2u4u, Commented Feb 12, 2021 at 8:44
if you want modal on the same page with the ProductCard. I don't think using route like that can achieve it. — Vo Quoc Thang
– Vo Quoc Thang, Commented Feb 12, 2021 at 8:49

Drew Reese · Accepted Answer · 2021-02-12 08:54:38Z

3

Issue

The Route rendering Forms is using an exact match, i.e. when the path is exactly "/form"

<Switch>
  <Route path="/form" exact component={Forms}></Route> // <-- exact match!!
  <Route path="/" exact component={ShopCards}></Route>
</Switch>

When the path is any subroute, i.e. "/form/3" it is no longer an exact match and Form is no longer rendered.

Solution

Remove the exact prop from the root route.

<Switch>
  <Route path="/form" component={Forms}></Route> // <-- general match
  <Route path="/" exact component={ShopCards}></Route>
</Switch>

Forms.js

return (
  <div>
    {prodCards.map((card, index) => (
      <ProductCard
        key={index}
        expand={expandFormHandler.bind(this, card.pid)}
      />
    ))}

    <Route path="/form/:id" component={Modal} /> // <-- more specific match
  </div>
);

edited Feb 12, 2021 at 8:54

answered Feb 12, 2021 at 8:46

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

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

Collectives™ on Stack Overflow

ReactJS: Component is not rendering in Nested Routing

1 Answer 1

Issue

Solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related