Difference between Route Exact Path and Route Path

In this blog post, we will check what is the difference between route exact path and route path. A path is a way by which a message transfers from one node to another. Every node is part of at least one of the paths. Let’s learn about this with the help of this blog post. 

Difference between Route Exact Path and Route Path

When you have several pathways with the same names, the exact parameter is relevant. An example of this is explained below.

Consider a Users component that showed a list of users as an illustration. Additionally, we have a component called CreateUser that is used to create users. The CreateUsers url ought to be contained beneath Users. The setup for the same is as follows:

<Switch>
  <Route path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

The issue is that the router will search through all of our configured routes and return the FIRST match it finds when we navigate to http://app.com/users. In this instance, it would first find the Users route before returning it. All is well.

On the other hand, if we navigated to http://app.com/users/create, it would once more search through all of our established routes and return the FIRST match it discovers. React router only performs partial matching, therefore /users would mistakenly return the Users route once more because it partially matches /users/create!

The exact argument prevents a route from using partial matching and ensures that it will only return the route if the path matches the current url EXACTLY.

<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

We hope that the above example must have cleared the difference between the both.

Also Read: What is Amazon EFS and its features