A React Location route is just an object. The
path defines the path of the route it should match. Every property of the
Route type is optional but clearly recommended for varying circumstances. Here's the simplest use-case for path matching!
A route path can be a string (regular expression support is coming soon!), and does not require a leading or trailing slash. The following are valid paths:
Important: Route paths are not case-sensitive by default. This means that
/Aboutare considered the same path. This is a good thing, since this is the way most of the web works anyway! However, if you truly want to match a path with a different case, you can set a route's
Leading and trailing slashes are optional because they do not affect the hierarchy of the route structure. To build hierarchy, you can use slashes inside of your route path:
Or, you can use the
children property to define child routes:
A route with a path of
/ is considered the root or index route, which is special because it is considered an exact match. For example:
Given a location of
/ route would match:
However, given a location of
/ would NOT match:
All other route path types that are not root/index (
/) routes are fuzzy matched. This means that if they are either an exact match OR are a prefix of the current location, they will match. For example:
Path params are named wildcards that can be used to match, and extract, any part of the path that they match. They can be defined by using the
: character in the path. The following are valid paths:
children property can be used to express nested routes with path params:
Because path params behave like wildcards, they will match any path that provides them with a valid value. Because of this, it is recommended to define path params last in your route hierarchy so you have the opportunity to match other non-wildcard paths before they are matched by path params:
Wildcard paths are defined by using the
* character in the path. The following are valid paths:
children property can be used to express nested routes with wildcard paths:
Up to this point, we've only talked about
path matching, but the
path is only a small party of the entire URL. In React Location, the
search section of the URL is actually a first-class citizen and represented as an object of key/value pairs. You can learn more about Search Params in another section, but we'll mention here that you can use the
search property to match a route using search params as well!
To do this, pass a
search function to the route:
search function is passed the current
search object, and should return a boolean value. If the function returns
true, the route will match.
Note that if you have two base routes that are only differentiated by search, you must supply a unique
id to each route object.
Even we are still exploring the possibilities that
searchmatching provides, so let us know what you do with them!
Routes in React Location are extremely forgiving with plenty of default behaviors:
path: *, so it will always be matched
element: <Outlet />(or whatever you set as the