A declarative way to redirect

This issue has been tracked since 2020-05-06.

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 wrote this answer on 2020-05-19

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 wrote this answer on 2020-05-19

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 wrote this answer on 2020-05-25

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 wrote this answer on 2021-09-11

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".

More Details About Repo
Owner Name EmilTholin
Repo Name svelte-routing
Full Name EmilTholin/svelte-routing
Language JavaScript
Created Date 2017-11-28
Updated Date 2022-12-03
Star Count 1711
Watcher Count 21
Fork Count 151
Issue Count 59

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date