React : difference between and

by

In this example, nothing really. The exact param comes into play when you have multiple paths that have similar names:

For example, imagine we had a Users component that displayed a list of users. We also have a CreateUser component that is used to create users. The url for CreateUsers should be nested under Users. So our setup could look something like this:

<Switch>
  <Route path="https://stackoverflow.com/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

Now the problem here, when we go to http://app.com/users the router will go through all of our defined routes and return the FIRST match it finds. So in this case, it would find the Users route first and then return it. All good.

But, if we went to http://app.com/users/create, it would again go through all of our defined routes and return the FIRST match it finds. React router does partial matching, so /users partially matches /users/create, so it would incorrectly return the Users route again!

The exact param disables the partial matching for a route and makes sure that it only returns the route if the path is an EXACT match to the current url.

So in this case, we should add exact to our Users route so that it will only match on /users:

<Switch>
  <Route exact path="https://stackoverflow.com/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

The docs explain exact in detail and give other examples.

More Related Contents:

  1. How to create a protected route?
  2. React-router-v6 access a url parameter
  3. React Router v4 renders multiple routes
  4. How to pass params into link using React router v6?
  5. react-router-dom v6 useNavigate passing value to another component
  6. Detect Route Change with react-router
  7. Simple Conditional Routing in Reactjs
  8. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  9. Invariant failed: You should not use outside a
  10. useNavigate() may be used only in the context of a component
  11. React Router Dom v6 shows active for index as well as other subroutes
  12. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  13. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  14. react app showing empty page when redirecting on production build
  15. React App goes blank after importing React-Router-Dom
  16. React Router 4 Nested Routes not rendering
  17. Children won’t render when using a layout in ReactJS
  18. How to go back to previous route in react-router-dom v6
  19. React Router V6 – Error: useRoutes() may be used only in the context of a component
  20. How to pass params with history.push/Link/Redirect in react-router v4?
  21. How to get history on react-router v4?
  22. React Router v4 – How to get current route?
  23. You should not use outside a
  24. react router v4 default page(not found page)
  25. Nested Routes not rendering with React Router v4
  26. React router, pass data when navigating programmatically?
  27. react routing is able to handle different url path but tomcat returns 404 not available resources
  28. React router and this.props.children – how to pass state to this.props.children
  29. using NavLink with external URL
  30. React Router Navigate pathing

Leave a Comment