Redirect from click handler

[gornostay25]

Hi there! How can I redirect a user after he clicks the if button? The Navigate method only works when replace is enabled, otherwise only the URL changes and the page remains the same

[mefechoel]

Hey, could you share your code please (or a simplified example of it)? I'm not quite sure what's going on, sorry.

[gornostay25]

The problem was that the new Route was opening and the old one was not hiding. I deleted my code and started writing the implementation from scratch. I used the svelte materialify appbar. But for example, the implementation of the authorization page worked properly

[gornostay25]

<script>
    import { user } from './../stores.js';
    import { AppBar, Button, Icon, NavigationDrawer,Menu,ListItem, List,Overlay } from 'svelte-materialify';
    import { mdiMenu,mdiDotsVertical,mdiCalendar,mdiCar,mdiCardAccountDetails } from '@mdi/js';
    import { useNavigate,useLocation } from 'svelte-navigator';
    export let title="";

    const navigate = useNavigate();
    const location = useLocation()

    let activeSMenu = !1

    function closeSnav(){
        activeSMenu = !1
    }
    function showSnav() {
        activeSMenu = !0
    }
    function logout() {
        $user = null;
    }
    function openSMitem(path) {
        closeSnav()
        console.log(path)
        setTimeout(() => {
          navigate(path, {
            state: { from: $location.pathname },
            replace: true,
          });
        }, 300);

    }
</script>

<div class="nav">
    <AppBar>
        <div slot="icon">
            <Button fab depressed on:click={showSnav}>
                <Icon path={mdiMenu} />
            </Button>
        </div>
        <span slot="title">{title}</span>
        <div style="flex-grow:1" />
            <slot name="add"></slot>
            {#if $$slots.list}
            <div class="ml-1">
                <Menu right>
                    <div slot="activator">
                        <Button fab depressed>
                            <Icon path={mdiDotsVertical} />
                        </Button>
                    </div>
                    <slot name="list"></slot>
                </Menu>
            </div>
            {/if}
    </AppBar>
</div>

    <NavigationDrawer fixed active={activeSMenu} style="height:100%">
      <List>
        <ListItem on:click={e=>openSMitem("/")}>
          <span slot="prepend">
            <Icon path={mdiCalendar} />
          </span>
          Календар
        </ListItem>
        <ListItem on:click={e=>openSMitem("/cars")}>
          <span slot="prepend">
            <Icon path={mdiCar} />
          </span>
          Автомобілі
        </ListItem>
        <ListItem  on:click={e=>openSMitem("/clients")}>
          <span slot="prepend">
            <Icon path={mdiCardAccountDetails} />
          </span>
          Клієнти
        </ListItem>
      </List>
      <span slot="append" class="pa-2">
        <Button block on:click={logout}>Вихід</Button>
      </span>
    </NavigationDrawer>
    <Overlay index={1} active={activeSMenu} on:click={closeSnav} fixed />

<style>
  .nav {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

</style>

[gornostay25]

It was like this

[mefechoel]

Are you using the Vite bundler for your project? There is an issue with Vite bundling a variable the router uses twice, which can lead to some navigations not working...

If so, you can fix that by adding this to your Vite config:

import { defineConfig } from "vite";
import svelte from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
  plugins: [svelte()],
  // Add this line:
  optimizeDeps: { exclude: ["svelte-navigator"] }
});

If that is not the problem, could you create a small REPL example, that demonstrates the issue? The example above is a lot of code and I can't make out what is related to the problem and what isn't, so a simple example with just what causes the problem would be helpful to identify the problem.

[gornostay25]

@mefechoel Thank you!