sveltejs / sveltejs/kit

A way to Rewrite outgoing Navigations

Open
#11,223 2 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the problem

There is currently no good way of rewriting the destination of an outgoing navigation.

There are many cases where this would be useful:

  • i18n routing (rewriting navigations to /about into /{lang}/about depending on the language)
  • If a page moved, but there are a lot of links to it, then rewriting every single link would be a lot of work. Registering a rewrite would be a lot quicker.
  • Route aliases (Eg. href="@admin/users" -> href="somewhere/admin/users")

Currently there is no good way of doing this.
If JS is enabled, the best you can do is to intercept the navigation in beforeNavigate, canceling it and starting a new one to a new destination. This looses any information about invalidation, scroll position etc. If JS is disabled the only way to do it is to bring your own preprocessor.

This kind of rewrite is strictly different from a redirect, since it wouldn't involve an intermediate request. The correct destination would be chose immediately.

Describe the proposed solution

Create a shared hook that enables rewriting the destination of any outgoing navigations. It could be called something like handleNavigation or resolveDestination.

This hook would be applied to:

  • goto calls.
  • redirect calls, both on the client & the server
  • Any href, action or formaction attributes

(That last one is needed for this to work on pre- / server-rendered pages with JS disabled. It could be implemented with a preprocessor. I have a working implementation)

If the destination rewrite is done before the routeID of the destination get's resolved this shouldn't™️ interfere with the router. Given that the rewritten links would be baked in to the markup on prerendered pages, this would run before beforeNavigate.

Alternatives considered

Always manually rewriting every link / goto / redirect.

Importance

would make my life easier

Additional Information

At Inlang we've been trying to implement an i18n-routing solution for SvelteKit that meets the following criteria:

  • Developers don't need to move any files in routes/
  • Developers don't need to rewrite any existing links
  • It just works (Todd Howard voice)

This combined with #5703 would enable that. We would be very happy to contribute towards making this happen!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the existing navigation paths named in the issue: goto, redirect, href, action, formaction, and beforeNavigate, across both client and server behavior. Compare how rewriting would interact with route resolution, invalidation, scroll position, prerendered markup, and JavaScript-disabled pages. Done means one shared hook consistently rewrites outgoing destinations without an intermediate request.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.