Skip to content

Commit ce1b81c

Browse files
committed
Add route matching guide
1 parent 804c4e4 commit ce1b81c

File tree

2 files changed

+30
-2
lines changed

2 files changed

+30
-2
lines changed

doc/00 Guides/Path Matching.md

Lines changed: 0 additions & 2 deletions
This file was deleted.

doc/00 Guides/RouteMatching.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
## Route Matching
2+
3+
In order to determine which routes to render, React Router traverses the route hierarchy searching for a set of routes that match the URL. Routes have two attributes that determine whether or not they match: 1) a `path` and 2) nesting.
4+
5+
### Path Syntax
6+
7+
A route path is a string pattern that is used to match a URL (or a portion of one). Route paths are interpreted literally, except for the following special symbols:
8+
9+
- `:paramName` - specifies a portion of the URL up to the next `/`, `?`, or `#` that is captured as a named "param"
10+
- `()` - specifies a portion of the URL that is optional
11+
- `*` - matches all characters up to the next character in the pattern, or the end of the URL
12+
13+
<Route path="/hello/:name"> // matches /hello/michael and /hello/ryan
14+
<Route path="/hello(/:name)"> // matches /hello, /hello/michael, and /hello/ryan
15+
<Route path="/files/*.*"> // matches /files/hello.jpg and /files/path/to/hello.jpg
16+
17+
### Nesting
18+
19+
Unlike most routers, React Router uses the concept of nested routes to let you declare nested sets of views that should be rendered when a given URL is invoked. Nested routes are arranged in a tree-like structure.
20+
21+
If a route uses a relative `path`, its `path` actually builds upon the accumulated `path` of its ancestors. Nested routes may opt-out of this behavior by using an absolute `path`. (Note: absolute paths may not be used in route config that is dynamically loaded. See [Advanced Usage][advanced]).
22+
23+
React Router traverses routes from the top of the hierarchy depth-first to find the deepest route in the hierarchy that matches the entire URL, stopping as soon as it finds one.
24+
25+
<Route path="/users"> // matches /users
26+
<Route path=":id" /> // matches /users/5
27+
<Route path="/about" /> // matches /about
28+
</Route>
29+
30+
[advanced]: AdvancedUsage.md

0 commit comments

Comments
 (0)