|
| 1 | +--- |
| 2 | +pageClass: 'rule-details' |
| 3 | +sidebarDepth: 0 |
| 4 | +title: 'svelte/no-navigation-without-resolve' |
| 5 | +description: 'disallow using navigation (links, goto, pushState, replaceState) without a resolve()' |
| 6 | +since: 'v2.36.0-next.9' |
| 7 | +--- |
| 8 | + |
| 9 | +# svelte/no-navigation-without-resolve |
| 10 | + |
| 11 | +> disallow using navigation (links, goto, pushState, replaceState) without a resolve() |
| 12 | +
|
| 13 | +## :book: Rule Details |
| 14 | + |
| 15 | +This rule reports navigation using HTML `<a>` tags, SvelteKit's `goto()`, `pushState()` and `replaceState()` functions without resolving a relative URL. All four of these may be used for navigation, with `goto()`, `pushState()` and `replaceState()` being intended solely for iternal navigation (i.e. not leaving the site), while `<a>` tags may be used for both internal and external navigation. When using any way of internal navigation, the URL must be resolved using SvelteKit's `resolve()`, otherwise the site may break. For programmatic navigation to external URLs, using `window.location` is advised. |
| 16 | + |
| 17 | +This rule checks all 4 navigation options for the presence of the `resolve()` fucntion call, with an exception for `<a>` links to absolute URLs (and fragment URLs), which are assumed to be used for external navigation and so do not require the `resolve()` function, and for shallow outing functions with an empty string as the path, which keeps the current URL. |
| 18 | + |
| 19 | +<!--eslint-skip--> |
| 20 | + |
| 21 | +```svelte |
| 22 | +<script> |
| 23 | + /* eslint svelte/no-navigation-without-resolve: "error" */ |
| 24 | +
|
| 25 | + import { goto, pushState, replaceState } from '$app/navigation'; |
| 26 | + import { resolve } from '$app/paths'; |
| 27 | +
|
| 28 | + // ✓ GOOD |
| 29 | + goto(resolve('/foo/')); |
| 30 | +
|
| 31 | + pushState(resolve('/foo/'), {}); |
| 32 | + pushState('', {}); |
| 33 | +
|
| 34 | + replaceState(resolve('/foo/'), {}); |
| 35 | + replaceState('', {}); |
| 36 | +
|
| 37 | + // ✗ BAD |
| 38 | + goto('/foo'); |
| 39 | + goto('/foo' + resolve('/bar')); |
| 40 | + goto(resolve('/foo') + '/bar'); |
| 41 | +
|
| 42 | + pushState('/foo', {}); |
| 43 | + replaceState('/foo', {}); |
| 44 | +</script> |
| 45 | +
|
| 46 | +<!-- ✓ GOOD --> |
| 47 | +<a href={resolve('/foo/')}>Click me!</a> |
| 48 | +<a href="https://svelte.dev">Click me!</a> |
| 49 | +
|
| 50 | +<!-- ✗ BAD --> |
| 51 | +<a href="/foo">Click me!</a> |
| 52 | +<a href={'/foo'}>Click me!</a> |
| 53 | +``` |
| 54 | + |
| 55 | +## :wrench: Options |
| 56 | + |
| 57 | +```json |
| 58 | +{ |
| 59 | + "svelte/no-navigation-without-resolve": [ |
| 60 | + "error", |
| 61 | + { |
| 62 | + "ignoreGoto": false, |
| 63 | + "ignoreLinks": false, |
| 64 | + "ignorePushState": false, |
| 65 | + "ignoreReplaceState": false |
| 66 | + } |
| 67 | + ] |
| 68 | +} |
| 69 | +``` |
| 70 | + |
| 71 | +- `ignoreGoto` ... Whether to ignore all `goto()` calls. Default `false`. |
| 72 | +- `ignoreLinks` ... Whether to ignore all `<a>` tags. Default `false`. |
| 73 | +- `ignorePushState` ... Whether to ignore all `pushState()` calls. Default `false`. |
| 74 | +- `ignoreReplaceState` ... Whether to ignore all `replaceState()` calls. Default `false`. |
| 75 | + |
| 76 | +## :books: Further Reading |
| 77 | + |
| 78 | +- [`resolve()` documentation](https://svelte.dev/docs/kit/$app-paths#resolve) |
| 79 | +- [Shallow routing](https://svelte.dev/docs/kit/shallow-routing) |
| 80 | +- [`goto()` documentation](https://svelte.dev/docs/kit/$app-navigation#goto) |
| 81 | +- [`pushState()` documentation](https://svelte.dev/docs/kit/$app-navigation#pushState) |
| 82 | +- [`replaceState()` documentation](https://svelte.dev/docs/kit/$app-navigation#replaceState) |
| 83 | + |
| 84 | +## :rocket: Version |
| 85 | + |
| 86 | +This rule was introduced in eslint-plugin-svelte v2.36.0-next.9 |
| 87 | + |
| 88 | +## :mag: Implementation |
| 89 | + |
| 90 | +- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/no-navigation-without-resolve.ts) |
| 91 | +- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/no-navigation-without-resolve.ts) |
0 commit comments