Reputation: 11561
I have a react Route
path with params but it always matches even though I use exact
on the Route
.
<Route exact path="/:term?" component={Home} />
<Route path="/some" component={SomePage} />
If I nav to /
then ok, no problem. If I nav to /some
then I get both components rendered.
How do I prevent both components from being rendered for the second path?
EDIT: With <Switch>
then the above example never routes to the /some
path.
Upvotes: 1
Views: 813
Reputation: 571
I hope this works.
<Router>
<Switch>
<Route exact path="/some" component={SomePage} />
<Route exact path="/:term?" component={Home} />
</Switch>
</Router>
Upvotes: 0
Reputation: 156
If the URL is /some, then and will all render because they all match the path. We want to pick only one to render. If we’re at /some we don’t want to also match /:term?. Here’s how to do it with Switch:
<Router>
<Switch>
<Route path="/some" component={SomePage} />
<Route exact path="/:term?" component={Home} />
</Switch>
</Router>
Upvotes: 1
Reputation: 9611
Be sure you have wrapped your Route
components in a Switch
component, so that only one of the routes gets used.
https://reactrouter.com/web/api/Switch
Upvotes: 3