AlexxNB / tinro

Highly declarative, tiny, dependency free router for Svelte's web applications.
MIT License
669 stars 30 forks source link

The fallback does not work #76

Closed gornostay25 closed 2 years ago

gornostay25 commented 2 years ago

    import { Route } from 'tinro'; 
    import { user } from './store.js';
    import 'bootstrap';
    import Login from './pages/Login.svelte';
    import Dashboard from './pages/Dashboard.svelte'
    import SideBar from './components/SideBar.svelte'
    import NavHeader from "./components/NavHeader.svelte"

</script>
{#if $user.status}
{#if $user.login}

    <NavHeader/>

    <div class="container-fluid">
        <div class="row">
            <SideBar></SideBar>

            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">

                <Route path="/">
                    <Dashboard/>
                </Route>
                <Route path="/orders">
                    <Dashboard/>
                </Route>
                <!-- orders detail -->
                <Route path="/order/:id" let:meta>
                    {JSON.stringify(meta)}
                </Route>
                <!-- orders detail -->
                <Route path="/menu">
                    <Dashboard/>
                </Route>
                <Route path="/clients">
                    <Dashboard/>
                </Route>
                <Route path="/integrations">
                    <Dashboard/>
                </Route>
                <Route path="/settings">
                    <Dashboard/>
                </Route>

                <Route fallback> 
                    404
                </Route>                

            </main>

        </div>
    </div>
{:else}
    <Route>
        <Login />
    </Route>
{/if}
{:else}
    <div class="waitlogin">
        <div class="spinner-grow" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
{/if}

<style>
@import "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css";

.waitlogin{
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
}
.waitlogin .spinner-grow{
    position: relative;
    left: calc(50% - 2rem);
    top: calc(50% - 2rem);
}
</style>```

<!-- When I enter the missing address in the browser, the fallback does not work(( -->
gornostay25 commented 2 years ago

But when I delete "if" everything works as it should

gornostay25 commented 2 years ago

I wrapped all the routers with another router, and it helped