Usage of exact and strict props

user_9610901 0
Viewed 17128

I am working with React-Router in React-JS:

The <Route> is an built in component and have two different props: exact and strict

Problem

The documentation does not clearly defines the differences in between the exact and strict .

Kindly help me. The document is very confusing and not clear at that point.

react-router-dom react-router reactjs
2 Answers

Use case 1

If you use exact and strict together, then the location.pathname will only match exactly as provided in path props.

Example:

<Route exact strict path="/one/" component={About}/>

Will only match /one/ but not /one and /one/two.

Use case 2

If you use only strict, then the location.pathname will match which have trailing slash.

Example:

<Route strict path="/one/" component={About}/>

Will match /one/ and /one/two but not /one.

Use case 3

If you use only exact, then the location.pathname will match exact location path.

Example:

<Route exact path="/one" component={About}/>

Will match /one or /one/. The exact props doesn't care for trailing slash. But it will not match /one/two.

user_21387520

ReactRouter's strict prop defines if there is a strict entry of requested path in pathname, as described in docs. For example, if you wish not to handle the page's route without trailing slash, your Route can be described like this:

<Route path="/mypath/" strict ... />

So the pathname /mypath won't be handled with this Route, and the pathname /mypath/ will be. Note, that in this mode this Route will also catch other child-routes, e.g. /mypath/childroute, /mypath/childroute/childroute2, etc, but it won't catch route /mypath?query=.... Think about this prop like if you are using "string".includes("substring"):

"/mypath".includes("/mypath/")       => false
"/mypath/".includes("/mypath/")      => true
"/mypath/kappa".includes("/mypath/") => true

The exact prop is used to define if there is an exactly the requested path. Usually it is used to wrap routes without child-routes (e.g. homepage).

<Route path="/" exact ... />
<Route path="/" ... />

First route will catch only routes like mydomain.com, mydomain.com/, mydomain.com/?query=... etc. The second will catch all routes, e.g. both of mydomain.com and mydomain.com/myroute.

user_72681090
Related