Skip to content

Commit b8e2e23

Browse files
committed
docs: optional segments
1 parent 0e4c524 commit b8e2e23

File tree

1 file changed

+33
-0
lines changed

1 file changed

+33
-0
lines changed

docs/route/route.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,39 @@ function Product() {
136136
}
137137
```
138138

139+
### Optional Segments
140+
141+
You can make a route segment optional by adding a `?` to the end of the segment.
142+
143+
```tsx
144+
<Route
145+
// this path will match URLs like
146+
// - /categories
147+
// - /en/categories
148+
// - /fr/categories
149+
path="/:lang?/categories"
150+
// the matching param might be available to the loader
151+
loader={({ params }) => {
152+
console.log(params["*"]); // "one/two"
153+
}}
154+
// and the action
155+
action={({ params }) => {}}
156+
element={<Categories />}
157+
/>;
158+
159+
// and the element through `useParams`
160+
function Categories() {
161+
let params = useParams();
162+
console.log(params.lang);
163+
}
164+
```
165+
166+
You can have optional static segments, too:
167+
168+
```jsx
169+
<Route path="/project/task?/:taskId" />
170+
```
171+
139172
### Splats
140173

141174
Also known as "catchall" and "star" segments. If a route path pattern ends with `/*` then it will match any characters following the `/`, including other `/` characters.

0 commit comments

Comments
 (0)