Skip to content

Commit 86898b2

Browse files
committed
docs(no-navigation-without-base): documented the new rule
1 parent 9c8206b commit 86898b2

File tree

1 file changed

+45
-11
lines changed

1 file changed

+45
-11
lines changed

docs/rules/no-navigation-without-base.md

+45-11
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ since: 'v2.36.0-next.9'
1212
1313
## :book: Rule Details
1414

15-
This rule reports navigation using SvelteKit's `goto()` function without prefixing a relative URL with the base path. If a non-prefixed relative URL is used for navigation, the `goto` function navigates away from the base path, which is usually not what you wanted to do (for external URLs, `window.location = url` should be used instead).
15+
This rule reports navigation using HTML `<a>` tags, SvelteKit's `goto()`, `pushState()` and `replaceState()` functions without prefixing a relative URL with the base path. 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 base path must be prepended, 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 base path, with an exception for `<a>` links to absolute URLs, which are assumed to be used for external navigation and so do not require the base path, and for shallow outing functions with an empty string as the path, which keeps the current URL.
1618

1719
<ESLintCodeBlock>
1820

@@ -22,37 +24,69 @@ This rule reports navigation using SvelteKit's `goto()` function without prefixi
2224
<script>
2325
/* eslint svelte/no-navigation-without-base: "error" */
2426
25-
import { goto } from '$app/navigation';
27+
import { goto, pushState, replaceState } from '$app/navigation';
2628
import { base } from '$app/paths';
27-
import { base as baseAlias } from '$app/paths';
2829
2930
// ✓ GOOD
3031
goto(base + '/foo/');
3132
goto(`${base}/foo/`);
3233
33-
goto(baseAlias + '/foo/');
34-
goto(`${baseAlias}/foo/`);
34+
pushState(base + '/foo/', {});
35+
pushState(`${base}/foo/`, {});
36+
pushState('', {});
3537
36-
goto('https://localhost/foo/');
38+
replaceState(base + '/foo/', {});
39+
replaceState(`${base}/foo/`, {});
40+
replaceState('', {});
3741
3842
// ✗ BAD
3943
goto('/foo');
40-
4144
goto('/foo/' + base);
42-
goto(`/foo/${base}`);
45+
46+
pushState('/foo', {});
47+
replaceState('/foo', {});
4348
</script>
49+
50+
<!-- ✓ GOOD -->
51+
<a href={base + '/foo/'}>Click me!</a>
52+
<a href={`${base}/foo/`}>Click me!</a>
53+
<a href="https://svelte.dev">Click me!</a>
54+
55+
<!-- ✗ BAD -->
56+
<a href="/foo">Click me!</a>
57+
<a href={'/foo'}>Click me!</a>
4458
```
4559

4660
</ESLintCodeBlock>
4761

4862
## :wrench: Options
4963

50-
Nothing.
64+
```json
65+
{
66+
"svelte/no-navigation-without-base": [
67+
"error",
68+
{
69+
"ignoreGoto": false,
70+
"ignoreLinks": false,
71+
"ignorePushState": false,
72+
"ignoreReplaceState": false
73+
}
74+
]
75+
}
76+
```
77+
78+
- `ignoreGoto` ... Whether to ignore all `goto()` calls. Default `false`.
79+
- `ignoreLinks` ... Whether to ignore all `<a>` tags. Default `false`.
80+
- `ignorePushState` ... Whether to ignore all `pushState()` calls. Default `false`.
81+
- `ignoreReplaceState` ... Whether to ignore all `replaceState()` calls. Default `false`.
5182

5283
## :books: Further Reading
5384

54-
- [`goto()` documentation](https://kit.svelte.dev/docs/modules#$app-navigation-goto)
55-
- [`base` documentation](https://kit.svelte.dev/docs/modules#$app-paths-base)
85+
- [`base` documentation](https://svelte.dev/docs/kit/$app-paths#base)
86+
- [Shallow routing](https://svelte.dev/docs/kit/shallow-routing)
87+
- [`goto()` documentation](https://svelte.dev/docs/kit/$app-navigation#goto)
88+
- [`pushState()` documentation](https://svelte.dev/docs/kit/$app-navigation#pushState)
89+
- [`replaceState()` documentation](https://svelte.dev/docs/kit/$app-navigation#replaceState)
5690

5791
## :rocket: Version
5892

0 commit comments

Comments
 (0)