Hash routing with admin mode and params

[drmikecrowe]

I think this has potential, but the documentation/examples need some additional info. I'm trying to create hash based routing for a site.

My goal is to have a SPA with admin/user support that uses hashes so you hit refresh and return to the same spot.

For additional complication, my SPA is in a folder /reviews

I also don't understand how to use links/params in hash mode. For example

In my main.ts:

init({ implicitMode: 'hash' })

In my App.svelte:

  <Router id="main-router" hash={true} basePath="/reviews">
    <main class="flex-1 transition-all duration-300 lg:ml-64">
      <div class="p-8 pt-20">
          <Route key="admin" path="/" and={() => $adminModeEnabled}>
            <AdminView  />
          </Route>

          <Route key="admin-view" path="/admin/view/:employeeId?" and={() => $adminModeEnabled}>
            {#snippet children(params)  }
              <AdminView params={{
                employeeId: params?.employeeId?.toString()
              }} />
            {/snippet}
          </Route>

          <Route key="admin-review-edit" path="/admin/edit/:employeeId/:reviewId" and={() => $adminModeEnabled}>
            {#snippet children(params)  }
              <ReviewEditView params={{
                employeeId: params?.employeeId?.toString(),
                reviewId: params?.reviewId?.toString()
              }} />
            {/snippet}
          </Route>


          <Route key="default" path="/" and={() => !$adminModeEnabled}>
            <ConsultantView />
          </Route>

        {/if}
        <RouterTrace />
      </div>
    </main>
  </Router>

When I try and use the above, no route matches and the <main> section is blank.

Ideally, what I want is for the URL to match something like this so a refresh can return to that same point:

• /reviews/#/admin
• /reviews/#/admin/view/60

Additionally, how would you navigate to that second link?

Also, how do you manually navigate to one of these paths?

    if (employee) 
      location.navigate(`/admin/${employee.employeeId}`, { replace: true })

[webJose]

Hello!

See this piece to understand the problem. I'll explain.

Implicit Mode

The implicit mode, by default is 'path'. The implicit mode decides the universe the component will belong to when the hash property is not specified. You're changing it to 'hash'. You would do this whenever you expect to be writing more components for hash routing than you will for path routing. This is so you save yourself from writing the property as much as possible.

How To Fix

You want your main section to show when path is /reviews, but your code clearly shows that the router's hash property is set to true. That makes the router part of the hash routing universe. Refer to the documentation link I provided. You need it to be false.

Then you have some <Route> components. I'll venture myself here to say that these are for the hash part. In that case, you now need to move those inside a <Router> that belongs to the hash routing universe. There is none in your code right now.

<Router hash={false}> <!-- Explicit hash:  Path routing -->
  <Route path="/reviews" hash={false}>
    <Router path="/"> <!-- Implicit hash:  As per your call to init(), this will be hash routing -->
      <!-- Add routes.  It can be routes for path or hash routing. -->
    </Router>
  </Route>
</Router>

Navigation

location.navigate(`#/admin/view/${employee.employeeId}`, { replace: true })

---

Does this help? Let me know.