# svelte/no-navigation-without-resolve

disallow internal navigation (links, goto(), pushState(), replaceState()) without a resolve()

  • ⚙️ This rule is included in "plugin:svelte/recommended".

# 📖 Rule Details

This rule ensures internal navigation via HTML <a> tags, SvelteKit’s goto(), pushState() and replaceState() uses resolve(). <a> tags will skip this check when it has an absolute URL or rel="external". For programmatic external navigation, use window.location. Enforcing this rule ensures the base path is prefixed and internal links are type-checked.

<!-- ✓ GOOD -->
<script>
  /* eslint svelte/no-navigation-without-resolve: "error" */

  import { goto, pushState, replaceState } from '$app/navigation';
  import { resolve } from '$app/paths';

  goto(resolve('/foo/'));
  pushState(resolve('/foo/'), {});
  replaceState(resolve('/foo/'), {});

  // shallow routing
  pushState('', {});
  replaceState('', {});
</script>

<a href={resolve('/foo/')}>Click me!</a>
<a href="https://svelte.dev">Click me!</a>
<a href={someURL} rel="external">Click me!</a>
<a href="#top">Click me!</a>
<!-- ✗ BAD -->
<script>
  /* eslint svelte/no-navigation-without-resolve: "error" */

  import { goto, pushState, replaceState } from '$app/navigation';
  import { resolve } from '$app/paths';

  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>

<a 
Unexpected href link without resolve(). (svelte/no-navigation-without-resolve)
href="/foo">Click me!</a>
<a 
Unexpected href link without resolve(). (svelte/no-navigation-without-resolve)
href={'/foo'}>Click me!</a>

# 🔧 Options

{
  "svelte/no-navigation-without-resolve": [
    "error",
    {
      "ignoreGoto": false,
      "ignoreLinks": false,
      "ignorePushState": false,
      "ignoreReplaceState": false
    }
  ]
}
  • ignoreGoto … Whether to ignore all goto() calls. Default false.
  • ignoreLinks … Whether to ignore all <a> tags. Default false.
  • ignorePushState … Whether to ignore all pushState() calls. Default false.
  • ignoreReplaceState … Whether to ignore all replaceState() calls. Default false.

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v3.12.0

# 🔍 Implementation