# svelte/no-navigation-without-base

disallow using navigation (links, goto, pushState, replaceState) without the base path

# 📖 Rule Details

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.

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.

<script>
  /* eslint svelte/no-navigation-without-base: "error" */

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

  // ✓ GOOD
  goto(base + '/foo/');
  goto(`${base}/foo/`);

  pushState(base + '/foo/', {});
  pushState(`${base}/foo/`, {});
  pushState('', {});

  replaceState(base + '/foo/', {});
  replaceState(`${base}/foo/`, {});
  replaceState('', {});

  // ✗ BAD
  goto(
Found a goto() call with a url that isn't prefixed with the base path. (svelte/no-navigation-without-base)
'/foo');
  goto(
Found a goto() call with a url that isn't prefixed with the base path. (svelte/no-navigation-without-base)
'/foo/' + base);

  pushState(
Found a pushState() call with a url that isn't prefixed with the base path. (svelte/no-navigation-without-base)
'/foo', {});
  replaceState(
Found a replaceState() call with a url that isn't prefixed with the base path. (svelte/no-navigation-without-base)
'/foo', {});
</script>

<!-- ✓ GOOD -->
<a href={base + '/foo/'}>Click me!</a>
<a href={`${base}/foo/`}>Click me!</a>
<a href="https://svelte.dev">Click me!</a>

<!-- ✗ BAD -->
<a href="
Found a link with a url that isn't prefixed with the base path. (svelte/no-navigation-without-base)
/foo">Click me!</a>
<a href=
Found a link with a url that isn't prefixed with the base path. (svelte/no-navigation-without-base)
{'/foo'}>Click me!</a>

# 🔧 Options

{
  "svelte/no-navigation-without-base": [
    "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 v2.36.0-next.9

# 🔍 Implementation