Skip to content

Commit 5512b62

Browse files
authored
Add lost client-side visits docs (#206)
1 parent 0e265e4 commit 5512b62

File tree

1 file changed

+98
-0
lines changed

1 file changed

+98
-0
lines changed

docs/guide/manual-visits.md

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -400,6 +400,104 @@ router.get('/users', { search: 'John' }, { replace: true })
400400
> [!NOTE]
401401
> Visits made to the same URL automatically set `replace` to `true`.
402402
403+
# Client side visits
404+
405+
You can use the `router.push` and `router.replace` method to make client-side visits. This method is useful when you want to update the browser's history without making a server request.
406+
407+
:::tabs key:frameworks
408+
== Vue
409+
410+
```js
411+
import { router } from '@inertiajs/vue3'
412+
413+
router.push({
414+
url: '/users',
415+
component: 'Users',
416+
props: { search: 'John' },
417+
clearHistory: false,
418+
encryptHistory: false,
419+
preserveScroll: false,
420+
preserveState: false,
421+
})
422+
```
423+
424+
== React
425+
426+
```js
427+
import { router } from '@inertiajs/react'
428+
429+
router.push({
430+
url: '/users',
431+
component: 'Users',
432+
props: { search: 'John' },
433+
clearHistory: false,
434+
encryptHistory: false,
435+
preserveScroll: false,
436+
preserveState: false,
437+
})
438+
```
439+
440+
== Svelte 4|Svelte 5
441+
442+
```js
443+
import { router } from '@inertiajs/svelte'
444+
445+
router.push({
446+
url: '/users',
447+
component: 'Users',
448+
props: { search: 'John' },
449+
clearHistory: false,
450+
encryptHistory: false,
451+
preserveScroll: false,
452+
preserveState: false,
453+
})
454+
```
455+
456+
:::
457+
458+
All the parameters are optional. By default, all passed parameters will be merged with the current page. This means you are responsible for overriding the current page's URL, component, and props.
459+
460+
If you need access to the current page's props you can pass a function to the props option. This function will receive the current page's props as an argument and should return the new props.
461+
462+
:::tabs key:frameworks
463+
== Vue
464+
465+
```js
466+
import { router } from '@inertiajs/vue3'
467+
468+
router.push({ url: '/users', component: 'Users' })
469+
router.replace({
470+
props: (currentProps) => ({ ...currentProps, search: 'John' }),
471+
})
472+
```
473+
474+
== React
475+
476+
```js
477+
import { router } from '@inertiajs/react'
478+
479+
router.push({ url: '/users', component: 'Users' })
480+
router.replace({
481+
props: (currentProps) => ({ ...currentProps, search: 'John' }),
482+
})
483+
```
484+
485+
== Svelte 4|Svelte 5
486+
487+
```js
488+
import { router } from '@inertiajs/svelte'
489+
490+
router.push({ url: '/users', component: 'Users' })
491+
router.replace({
492+
props: (currentProps) => ({ ...currentProps, search: 'John' }),
493+
})
494+
```
495+
496+
:::
497+
498+
> [!NOTE]
499+
> Make sure that any route you push on the client side is also defined on the server side. If the user refreshes the page, the server will need to know how to render the page.
500+
403501
## State preservation
404502

405503
By default, page visits to the same page create a fresh page component instance. This causes any local state, such as form inputs, scroll positions, and focus states to be lost.

0 commit comments

Comments
 (0)