I am working with React-Router in React-JS:
The
is an built in component and have two different props:
exact
and strict
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
.
Example:
<Route exact strict path="/one/" component={About}/>
Will only match /one/
but not /one
and /one/two
.
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
.
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
.
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
.