# svelte/no-navigation-without-resolve
disallow using navigation (links, goto, pushState, replaceState) without a resolve()
- ⚙️ This rule is included in
"plugin:svelte/recommended"
.
# 📖 Rule Details
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 internal 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.
This rule checks all 4 navigation options for the presence of the resolve()
function 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 routing functions with an empty string as the path, which keeps the current URL.
<script>
/* eslint svelte/no-navigation-without-resolve: "error" */
import { goto, pushState, replaceState } from '$app/navigation';
import { resolve } from '$app/paths';
// ✓ GOOD
goto(resolve('/foo/'));
pushState(resolve('/foo/'), {});
pushState('', {});
replaceState(resolve('/foo/'), {});
replaceState('', {});
// ✗ BAD
goto(Unexpected goto() call without resolve(). (svelte/no-navigation-without-resolve)'/foo');
goto(Unexpected goto() call without resolve(). (svelte/no-navigation-without-resolve)'/foo' + resolve('/bar'));
goto(Unexpected goto() call without resolve(). (svelte/no-navigation-without-resolve)resolve('/foo') + '/bar');
pushState(Unexpected pushState() call without resolve(). (svelte/no-navigation-without-resolve)'/foo', {});
replaceState(Unexpected replaceState() call without resolve(). (svelte/no-navigation-without-resolve)'/foo', {});
</script>
<!-- ✓ GOOD -->
<a href={resolve('/foo/')}>Click me!</a>
<a href="https://svelte.dev">Click me!</a>
<!-- ✗ BAD -->
<a href="Unexpected href link without resolve(). (svelte/no-navigation-without-resolve)/foo">Click me!</a>
<a href=Unexpected href link without resolve(). (svelte/no-navigation-without-resolve){'/foo'}>Click me!</a>
# 🔧 Options
{
"svelte/no-navigation-without-resolve": [
"error",
{
"ignoreGoto": false,
"ignoreLinks": false,
"ignorePushState": false,
"ignoreReplaceState": false
}
]
}
ignoreGoto
… Whether to ignore allgoto()
calls. Defaultfalse
.ignoreLinks
… Whether to ignore all<a>
tags. Defaultfalse
.ignorePushState
… Whether to ignore allpushState()
calls. Defaultfalse
.ignoreReplaceState
… Whether to ignore allreplaceState()
calls. Defaultfalse
.
# 📚 Further Reading
resolve()
documentation- Shallow routing
goto()
documentationpushState()
documentationreplaceState()
documentation
# 🚀 Version
This rule was introduced in eslint-plugin-svelte v3.12.0