CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
batt
batt

Reputation: 3630

React : difference between <Route exact path="/" /> and <Route path="/" />

Can someone explain the difference between

<Route exact path="/" component={Home} />

and

<Route path="/" component={Home} />

I don't know the meaning of exact.

Upvotes: 346

Views: 299330

Answers (8)

Chase DeAnda
Chase DeAnda

Reputation: 16441

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="/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="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

UPDATE 2023 as pointed out by user smit-gabani

The new version of react - v6 does not support exact anymore.

As stated in their documentation:

You don't need to use an exact prop on anymore. This is because all paths match exactly by default. If you want to match more of the URL because you have child routes use a trailing * as in

Upvotes: 547

Muhammad Umar
Muhammad Umar

Reputation: 229

The exact prop in is used to ensure that the specified route matches exactly with the current location.

Route exact path="/":

<Route exact path="/" component={Home} />

In this, the Home component will only be rendered when the path is exactly "/" and not for paths like "/about" or "/contact".

Route path="/":

<Route path="/" component={Home} />

In this, the Home component will be rendered not only for the exact path "/" but also for any other path that starts with "/".

Upvotes: 1

Smit Gabani
Smit Gabani

Reputation: 340

If you have multiple routes defined for your app's routing, enclosed with Routes components that have similar names we might get unpredicted behavior.

For example:

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

Might give you some errors when you go to route

/users/create

Because as soon as react finds a root that matches with the regex user* it will redirect you to that route that is /users

Using exact like this

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

The new version of react - v6 does not support exact anymore.

As stated in their documentation:

You don't need to use an exact prop on anymore. This is because all paths match exactly by default. If you want to match more of the URL because you have child routes use a trailing * as in <Route path="users/*">

Upvotes: 8

Jude Howell Sarabia
Jude Howell Sarabia

Reputation: 65

By using exact, you can make sure that the contents of the homepage component will not appear on the other pages.

This is the scenario without using exact:

HOMEPAGE

Location: /

-----------------
homepage content
-----------------

SECOND PAGE

Location: /second-page

-----------------
homepage content
-----------------
-----------------
second content
-----------------

==========================================

Using exact:

HOMEPAGE

Location: /

-----------------
homepage content
-----------------

SECOND PAGE

Location: /second-page

-----------------
second content
-----------------

Upvotes: -2

nisaelk
nisaelk

Reputation: 11

Please try this.

       <Router>
          <div>
            <Route exact path="/" component={Home} />
            <Route path="/news" component={NewsFeed} />
          </div>
        </Router>

Upvotes: -9

Nouar
Nouar

Reputation: 3247

Take a look here: https://reacttraining.com/react-router/core/api/Route/exact-bool

exact: bool

When true, will only match if the path matches the location.pathname exactly.

**path**    **location.pathname**   **exact**   **matches?**

/one        /one/two                true        no
/one        /one/two                false       yes

Upvotes: 17

Jamal Sheikh Ali
Jamal Sheikh Ali

Reputation: 49

The shortest answer is

Please try this. 

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>

Upvotes: -10

milkersarac
milkersarac

Reputation: 3469

In short, if you have multiple routes defined for your app's routing, enclosed with Switch component like this;

<Switch>

  <Route exact path="/" component={Home} />
  <Route path="/detail" component={Detail} />

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>

Then you have to put exact keyword to the Route which it's path is also included by another Route's path. For example home path / is included in all paths so it needs to have exact keyword to differentiate it from other paths which start with /. The reason is also similar to /functions path. If you want to use another route path like /functions-detail or /functions/open-door which includes /functions in it then you need to use exact for the /functions route.

Upvotes: 33

Related Questions