Can't render only one Route in react-router-dom

Question

I made a router, but upon request /user/add, both components are rendered. I need to only display the UserAdd component.

<Switch>
  <Route exact path="users/add" component={UserAdd} />
  <Route exact path="users/:id" component={UserPreview} />
</Switch>

If you have rendered the routes in a `Switch` as in the question, `exact` is not required, can you recheck if this indeed the configuration being used? — Agney, Jan 31 '20 at 05:26

Alex · Accepted Answer · 2020-01-31T04:41:17.597

3

add exact to route,

<Route exact path="/users/add" component={UserAdd} />

edited Jan 31 '20 at 04:41

answered Jan 31 '20 at 04:26

Alex

I added `exact` to both Route. But when we turn to /users/add, both UserAdd and UserPreview are rendered. – Maks Endless Jan 31 '20 at 05:23
@Maks Endless , could you please share what was the problem? I think it was missing `/`, isn't it? – Alex Jan 31 '20 at 05:57

score 0 · Answer 2 · answered Jan 31 '20 at 04:35

exact keyword is used only when you want to render a component when there is an exact match of route.

When you have multiple routes then use exact to visit specific page.

<Route exact path="/users/add" component={UserAdd} />

For better understanding between <Route exact path="/" /> and <Route path="/" />

2 Answers2