A declarative way to redirect

[krishnagopinath]

Thank you for this fantastic library!

I believe that a "declarative" way to redirect to a desired route would be very useful. Something like this: https://reacttraining.com/react-router/web/api/Redirect

Its probably very easy to implement this in user land with the navigate function, but it would great if the library provided a way to do that, so there aren't hundreds of implementations out there!

Here's how usage would look like:

{#await auth.verify()}
    <Spinner />
{:then}
    {#if adminOnly && $user.role !== 'admin'}
		    <Redirect path="/" />	
    {:else}
        <slot />
    {/if}
{:catch}
    <Redirect path="/login" replace />
{/await}

That's definitely more "declarative" than what I do now:

<script>
import { navigate } from 'svelte-routing'

export let adminOnly = false;

function verifyUser() {
	return auth.verify().then(user => {
		if (adminOnly && $user.role !== 'admin') {
			return navigate('/')
			throw new Error('error so that `#await` block `then` is not run')	
		}
	}).catch(err => {
		navigate('/login')
		
		// Rethrow error so that the `#await` block works correctly
		throw err
	})
}

</script>
{#await verifyUser()}
    <Spinner />
{:then}
    <slot />
{/await}

This is definitely more boilerplate-y than the proposed version.

I'd love to know your thoughts about this!

[EmilTholin]

Hi @krishnagopinath! Thank you for your kind words!

A Redirect component was discussed briefly in this issue. The main issue is that most users would expect a Redirect component in the library to work server-side as well, and to make that work svelte-routing would have to make a lot of assumptions about your server setup.

I would personally opt for handling the redirect server-side separately, and create a custom component for the browser that does something like this, like you alluded to:

<!-- Redirect.svelte -->
<script>
  import { onMount } from 'svelte';
  import { navigate } from 'svelte-routing';

  export let to;

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

<!-- App.svelte -->
<Route path="/">
  <Redirect to="/dashboard" />
</Route>
<Route path="/dashboard" component={Dashboard} />

[krishnagopinath]

That makes sense, @EmilTholin !

Thank you the response.

Would it make sense to add this to the readme, in case of someone wanted this? Or do you think it's too trivial to be added there? Its okay if it is, was just wondering.

[EmilTholin]

I don't think a section on this in the readme will be needed now that we have this nice issue of yours that is easily searchable for anyone wanting more information about a declarative redirect. If this question were to come up more times we can add it to the readme, for sure.

[NoahCardoza]

I'd second a note in the README. Minimally the keyword "redirect" and a link to this issue. While I was able to find this in a couple of minutes, there are quite a number of issues that came up when I searched "redirect" and the first thing I did was a word search the README for "redirect".

[rokit]

<!-- Redirect.svelte -->
<script>
  import { onMount } from 'svelte';
  import { navigate } from 'svelte-routing';

  export let to;

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

<!-- App.svelte -->
<Route path="/">
  <Redirect to="/dashboard" />
</Route>
<Route path="/dashboard" component={Dashboard} />

One problem is that it will hijack the user's back button.

• User goes to homepage "/"
• User is auto-navigated to "/dashboard"
• User clicks back and is caught in a never-ending cycle

I would replace navigate(to) with window.location.replace(to) so it will be as if the user never even visited "/".