Skip to content

Relative Link

The relative link error indicates that an internal link uses a relative path instead of an absolute path. For example, in ./guides/usage/, ./ makes the link relative.

Relative internal links are usually considered confusing because they can be difficult to reason about, figure out where they point to, and require more maintenance when a page is moved. If you prefer to ignore relative links instead of erroring on them, you can disable this error using the errorOnRelativeLinks option.

For example, given the following project structure:

  • Directorysrc/
    • Directorycontent/
      • Directorydocs/
        • Directoryguides/
          • installation.md
          • usage.mdx
        • getting-started.md

With the following content in src/content/docs/getting-started.md:

src/content/docs/getting-started.md
---
title: Getting Started
---
## Next Steps
- [Usage guide](./guides/usage/)
- [Installation guide](/guides/installation/)
- [Updating](./#updating)
## Updating
Some content.

Running a production build reports the following errors:

astro build
╭─ getting-started.md
·
7 | ./guides/usage/
· ╰── relative link
9 | ./#updating
· ╰── relative link
╭─ ─╮
· Found 2 invalid links in 1 file. ·
╰─ ─╯

To fix relative link errors, replace each relative path with the equivalent absolute path from the root of your docs site.

For this example:

  • Update ./guides/usage/ to /guides/usage/.
  • Update ./#updating to #updating because the target heading is in the same page and only the hash is needed.