|
25 | 25 | [@svelte-router/kit](https://github.com/WJSoftware/svelte-router-kit) |
26 | 26 | + **Electron support**: Works with Electron (all routing modes) |
27 | 27 | + **Reactivity-based**: All data is reactive, reducing the need for events and imperative programming. |
| 28 | ++ **⚡NEW! URL Redirection**: Use `Redirector` instances to route users from deprecated URL's to new URL's, even across |
| 29 | +routing universes. |
28 | 30 |
|
29 | 31 | **Components**: |
30 | 32 |
|
@@ -470,6 +472,70 @@ As seen, the value of the `href` property never changes. It's always a path, re |
470 | 472 | At your own risk, you could use exported API like `getRouterContext()` and `setRouterContext()` to perform unholy acts |
471 | 473 | on the router layouts, again, **at your own risk**. |
472 | 474 |
|
| 475 | +## URL Redirection |
| 476 | + |
| 477 | +Create `Redirector` class instances to route users from deprecated URL's to new URL's. The redirection can even cross |
| 478 | +the routing universe boundary. In other words, URL's from one routing universe can be redirected to a different |
| 479 | +routing universe. |
| 480 | + |
| 481 | +This is a same-universe example: |
| 482 | + |
| 483 | +```svelte |
| 484 | +<script lang="ts"> |
| 485 | + import { Redirector } from "@svelte-router/core"; |
| 486 | + import { onMount } from "svelte"; |
| 487 | +
|
| 488 | + const redirector = new Redirector(/* hash value, or nothing for default universe */); |
| 489 | + redirector.redirections.push({ |
| 490 | + pattern: `/orders/:id`, |
| 491 | + href: (rp) => `/profile/my-orders/${rp?.id}` |
| 492 | + }); |
| 493 | +
|
| 494 | + onMount(() => () => redirector.dispose()); |
| 495 | + ... |
| 496 | +</script> |
| 497 | +``` |
| 498 | + |
| 499 | +The constructor of the class sets a Svelte `$effect` up, so instances of this class must be created in places where |
| 500 | +Svelte effects are acceptable, like the initialization code of a component (like in the example). |
| 501 | + |
| 502 | +Redirections are almost identical to route definitions, and even use the same matching algorithm. The `pattern` is |
| 503 | +used to match the current URL (it defines the deprecated URL), while `href` defines the new URL users will be |
| 504 | +redirected to. As seen in the example, parameters can be defined, and `href`, when written as a function, receives |
| 505 | +the route parameters as the first argument. |
| 506 | + |
| 507 | +### Cross-Universe Redirection |
| 508 | + |
| 509 | +Crossing the universe boundary when redirecting is very simple, but there's a catch: Cleaning up the old URL. |
| 510 | + |
| 511 | +```svelte |
| 512 | +<script lang="ts"> |
| 513 | + import { Redirector } from "@svelte-router/core"; |
| 514 | +
|
| 515 | + const redirector = new Redirector(false); |
| 516 | + redirector.redirections.push({ |
| 517 | + pattern: `/orders/:id`, |
| 518 | + href: (rp) => `/profile/my-orders/${rp?.id}`, |
| 519 | + options: { hash: true } |
| 520 | + }); |
| 521 | + ... |
| 522 | +</script> |
| 523 | +``` |
| 524 | + |
| 525 | +The modifications in the example are: |
| 526 | + |
| 527 | +1. Explicit hash value in the redirector's constructor. |
| 528 | +2. Destination hash value specifications via options. |
| 529 | + |
| 530 | +Now comes the aforementioned catch: The "final" URL will be looking like this: `https://example.com/orders/123#/profile/my-orders/123`. |
| 531 | + |
| 532 | +There's no good way for this library to provide a safe way to "clean up" the path in the deprecated routing universe, |
| 533 | +so it is up to consumers of this library to clean up. How? The recommendation is to tell the redirector to use |
| 534 | +`location.goTo()` and provide a full HREF with all universes accounted for. |
| 535 | + |
| 536 | +See the [Redirecting](https://wjfe-n-savant.hashnode.space/wjfe-n-savant/navigating/redirecting) topic in the online |
| 537 | +documentation for full details, including helper functions available to you. |
| 538 | + |
473 | 539 | --- |
474 | 540 |
|
475 | 541 | [Issues Here](https://github.com/WJSoftware/svelte-router-core/issues) |
|
0 commit comments