Redirect Component

[KaiVolland]

Hi @mefechoel,

you did some great work here.

I run accross an IMHO unsolved need for the svelte-navigator.
Sometimes you just want to redirect when getting to a specific Route.

e.G. when you navigate to my-app.com/user you want to see the user details which are accesible under my-app.com/user/details.

Therefore i created a tiny Redirect.svelte component in my app:

<script lang="ts">
  import { onMount } from 'svelte';
  import { useNavigate } from 'svelte-navigator';

  export let to;

  const navigate = useNavigate();
  onMount(() => {
    navigate(to);
  });
</script>

… which should be a child of Route …

<script lang="ts">
  import Redirect from './Redirect.svelte';
</script>

<Router>
  <Route path="user/*">
    <Route path="details">
      <UserDetails />
    </Route>
    <Route path="friends">
      <Friendslist />
    </Route>
    <Route>
      <Redirect to="/user/details" />
    </Route>
  </Route>
</Router>

I'm curious how your approach would look like for this scenario and if your interested in a PR for this component.

Greetings Kai

[visma-sorinbroscaru]

+1

I had to use same component, exactly how you have it here.

[mefechoel]

Hey there and thanks for your interest! The reason why there is no redirect component in svelte-navigator is because it would need to work both client and server side. When server side rendering a page using svelte-navigator, the library knows nothing about the rest of your server stack, so it can't make any assumptions on how to best redirect anywhere. Some SSR or SSG framework might be able to solve that, but this simple library just can't do that. So for consistencies sake and because you can implement a redirect component yourself, just like you did, it is not included in the lib.

[johhnry]

Hi everyone,

Same here this works perfectly, I was trying to replicate the behavior or React Router's Redirect component!

Thanks a lot!