CODEWITHSUNDEEP
reactjsparametersreact-router-dom
Siddharta Naranjo
Siddharta Naranjo

Reputation: 157

React router dom params issue

I tried to Routing the params ":id" in react with a sub Route ":id/history" and the route link not render the component on clicking

<Switch>
     <Route path="/patients/:id" exact component={GeneralData} />
     <Route path="/patients/:id/history" component={History} />
</Switch>

Upvotes: 0

Views: 194

Answers (2)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15698

The Switch component renders the first route that matches the URL you entered

Because you are using a wildcard for your GeneralData Route like so

<Route path="/patients/:id" component={GeneralData}/>

No matter what you enter after /patients, it gets captured in that wildcard definition of that Route because it accepts literally anything. So even if you navigate to /patients/4834834/history it still satisfies the GeneralData route which was found first in the list of routes.

To fix this, simply move your History Route above your GeneralData Route. This makes it so the GeneralData route will not get rendered for anything that just satisfies /patients/:id. Switch will look to see if your URL matches History first.

<Switch>
     <Route path="/patients/:id/history" component={History} />
     <Route path="/patients/:id" component={GeneralData} />
</Switch>

Upvotes: 1

David
David

Reputation: 84

I think you're omitting exact param.

Upvotes: 1

Related Questions