Skip to content

Commit cb0478a

Browse files
authored
docs(router): usage of "." and ".." for relative navigation (#4846)
1 parent 3ca2a29 commit cb0478a

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

docs/router/framework/react/guide/navigation.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,30 @@ const link = (
199199

200200
As seen above, it's common to provide the `route.fullPath` as the `from` route path. This is because the `route.fullPath` is a reference that will update if you refactor your application. However, sometimes it's not possible to import the route directly, in which case it's fine to provide the route path directly as a string. It will still get type-checked as per usual!
201201

202+
### Special relative paths: `"."` and `".."`
203+
204+
Quite often you might want to reload the current location, for example, to rerun the loaders on the current and/or parent routes, or maybe there was a change in search parameters. This can be achieved by specifying a `to` route path of `"."` which will reload the current location. This is only applicable to the current location, and hence any `from` route path specified is ignored.
205+
206+
Another common need is to navigate one route back relative to the current location or some other matched route in the current tree. By specifying a `to` route path of `".."` navigation will be resolved to either the first parent route preceding the current location or, if specified, preceding the `"from"` route path.
207+
208+
```tsx
209+
export const Route = createFileRoute('/posts/$postId')({
210+
component: PostComponent,
211+
})
212+
213+
function PostComponent() {
214+
return (
215+
<div>
216+
<Link to=".">Reload the current route of /posts/$postId</Link>
217+
<Link to="..">Navigate to /posts</Link>
218+
<Link from="/posts" to="..">
219+
Navigate to root
220+
</Link>
221+
</div>
222+
)
223+
}
224+
```
225+
202226
### Search Param Links
203227

204228
Search params are a great way to provide additional context to a route. For example, you might want to provide a search query to a search page:

0 commit comments

Comments
 (0)