Skip to content

Commit a5b5d4e

Browse files
committed
better route pattern parts section
1 parent 1fed29d commit a5b5d4e

File tree

1 file changed

+40
-11
lines changed

1 file changed

+40
-11
lines changed

packages/route-pattern/README.md

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,25 +52,54 @@ for (const match of matcher.matches(url)) {
5252

5353
## Route pattern parts
5454

55-
Route patterns may specify any combination of protocol, hostname, pathname, and search:
55+
Route patterns are composed of 4 parts: protocol, hostname, pathname and search.
56+
You can use any combination of these to create a route pattern, for example:
5657

5758
```ts
58-
'/products'; // Match on the URL pathname
59-
'/search?q'; // Match the pathname + search
60-
'https://remix.run/store'; // Match the protocol + hostname + pathname
61-
'://remix.run/store'; // Match hostname + pathaname
62-
'file:///usr/bin'; // Match protocol + pathname
59+
'/products'; // pathname
60+
'/search?q'; // pathname + search
61+
'https://remix.run/store'; // protocol + hostname + pathname
62+
'://remix.run/store'; // hostname + pathaname
63+
'file:///usr/bin'; // protocol + pathname
64+
// ...and so on...
6365
```
6466

65-
**Note:** In route patterns, hostnames must begin with `://` to distinguish them from pathnames
67+
**Delimiters:** Route patterns use the first occurrences of `://`, `/`, and `?` as delimiters to split a route pattern into its parts.
68+
Pathname-only route patterns are the most common, so route patterns are assumed to be pathname-only unless `://` or `?` are present.
69+
As a result, hostnames must begin with `://` and searches must begin with `?` to distinguish both from pathnames.
70+
71+
**Case Sensitivity:** Protocol and hostname are case-insensitive, while pathname and search are case-sensitive.
72+
73+
**Omitting parts:** For protocol, hostname, and pathname omitting that part means "match anything" for that part.
74+
However, omitting a pathname means "match the 'empty' pathname" (namely `""` and `"/"`)
75+
76+
```ts
77+
'://api.example.com/users';
78+
// ✓ matches: https://api.example.com/users
79+
// ✓ matches: http://api.example.com/users
80+
// ✓ matches: ftp://api.example.com/users
81+
82+
'/api/users';
83+
// ✓ matches: https://example.com/api/users
84+
// ✓ matches: https://staging.api.com/api/users
85+
// ✓ matches: https://localhost:3000/api/users
86+
87+
'https://api.example.com';
88+
// ✓ matches: https://api.example.com
89+
// ✓ matches: https://api.example.com/
90+
// ✗ doesn't match: https://api.example.com/users
91+
```
6692

67-
| | protocol | hostname | pathname | search |
68-
| --------------------------- | ---------------- | ---------------- | ----------------------------- | -------------- |
69-
| Case-sensitivity | Case-insensitive | Case-insensitive | Case-sensitive | Case-sensitive |
70-
| Match behavior when omitted | Any protocol | Any hostname | Empty pathname: `""` or `"/"` | Any search |
7193

7294
## Pattern modifiers
7395

96+
Before describing [wildcards](#wildcards), [params](#params), and [optionals](#optionals),
97+
its important to note that each pattern modifier applies only in the same part of the URL where it appears.
98+
As a result:
99+
100+
- Wildcards and params do not match characters that appear outside of their part of the route pattern
101+
- Optionals must begin and end within the same part of the route pattern
102+
74103
### Wildcards
75104

76105
| | protocol | hostname | pathname | search |

0 commit comments

Comments
 (0)