blob: 67eadce968ac50db30eae5ae23252abda28f03c5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
Path Matching
=============
Relative v. Absolute Paths
--------------------------
Paths that start with `/` are absolute, paths that don't are relative,
meaning they extend their parent's path.
```xml
<Route path="/">
<!-- /courses/123 -->
<Route path="courses/:courseId">
<!-- /courses/123/anouncements -->
<Route path="announcements" />
<!-- /courses/123/dashboard -->
<Route path="dashboard" />
</Route>
<!-- /inbox -->
<Route path="inbox">
<!-- /messages/123 -->
<Route path="/messages/:messageId"/>
</Route>
</Route>
```
Absolute paths allow you to use any URL you want while maintaining the
automatic view nesting of the router.
Dynamic Segments
----------------
Dynamic segements are defined with a `:`, like `:userId`. They will be
parsed and available by name in your route handler on
`this.props.params`. They match most characters except `. / ? #`.
Splats
------
Splats are defined with `*` and will non-greedily match anything. The
value will be available in your route handler as
`this.props.params.splat`. If there are multiple, you'll get an array of
values.
Question Mark
-------------
Question marks will optionally match the preceeding segment.
Examples
--------
```
path: /file/:name.?:ext?
matches:
/file/foo.js
this.props.params: {name: 'foo', ext: 'js'}
/file/foo
this.props.params: {name: 'foo'}
does not match:
/file/foo.bar.js
/file/quux/baz.js
path: /file/*
matches:
/file/foo.bar.js
this.props.params: {splat: 'foo.bar.js'}
/file/quux/baz.js
this.props.params: {splat: 'quux/baz.js'}
path: /foo/*/:bar/?*?
matches:
/foo/a.b.c/taco/def
this.props.params: {bar: 'taco', splat: ['a.b.c', 'def']}
/foo/a.b.c/taco
this.props.params: {bar: 'taco', splat: 'a.b.c'}
does not match:
/foo/a.b.c
path: *
matches everything, but you probably want `<NotFoundRoute/>`
```
|
