Browser Back Button Not Working

[especdevelopment]

I am having an issue that seems to stem from this one:

Route Fails on Navigation #14

I am using Meteor/Svelte. Importing this way seems to resolve the error, but something goes wrong with the browser history. My browser back/forward buttons stop working. No errors etc...

This also seems to happen when using the router.goto method. The URLs change but the view does not. If you refresh your browser, then the proper view displays.

[AlexxNB]

Don't know how meteor works....

1. Ensure that you use custom import (tinro/cmp/index.js)in all cases.
2. Try to force history navigation this way:

import {router} from 'tinro/cmp/index.js';
router.mode.history(); 

[especdevelopment]

Okay, I can give that a shot! Just to clarify...here is how I am importing the router now:

import { Route } from 'tinro/cmp/index.js';

As an example, here is a nested route that I am using:

` <Route path="/users/*"> <Route path="/"> <TopNav userPermission={userPermission}/> <UsersLander userPermission={userPermission}/> </Route>

    <Route path="/add-users">
      <TopNav userPermission={userPermission}/>
      <div class="templateWrap">
        <AddUsers userProfile={userProfile} userPermission={userPermission}/>
      </div>
    </Route>

    <Route path="/manage-users">
      <TopNav userPermission={userPermission}/>
      <div class="templateWrap">
        <ManageUsers userProfile={userProfile} userPermission={userPermission} />
      </div>
    </Route>

    <!--Single User Routes-->
    <Route path="/single/*">
      <Route path="/:id" let:meta>
        <TopNav userPermission={userPermission}/>
        <div class="templateWrap">
          <SingleUser userPermission={userPermission} profileId={meta.params.id}/>
        </div>
      </Route>
    </Route>
  </Route>`

In this scenario, how would I utilize the router.mode.history() method? I had started swapping out tinro for another router and can confirm the other routers do not have the issue. I was trying to sort out exactly what it may be that Meteor is doing that could cause this...bummer as tinro certainly seems to have a HUGE advantage over other routers. :(

[AlexxNB]

In this scenario, how would I utilize the router.mode.history() method?

Just import and call in your root file . (App.svelte or whatever).

Is there any error in console? I just have no Idea where is problem. Doуs meteor work with ES modules? Try also use a tinro/dist/tinro.es.js import path.

[especdevelopment]

I really appreciate you looking at this with me! Yes, Meteor does accept ES modules. I did try the following:

import { Route,router } from 'tinro/dist/tinro.es.js' router.mode.history();

Unfortunately no success. I wonder if perhaps this could be because I am handling my routes from App.svelte like this?

<script> import PublicRoutes from './public/PublicRoutes.svelte'; import SecureRoutes from './secure/SecureRoutes.svelte'; </script>

<PublicRoutes /> <SecureRoutes userProfile={$userProfile} userPermission={userPermission}/>

I should also mention that the browser back/forward buttons DO WORK; however, I need to click back/forward twice for them to work...

[especdevelopment]

I tried swapping routes to my main App.svelte file, but the same results. History does seem to work, but requires 2 clicks on either back/forward buttons to work. :(

[ansarizafar]

I am also seeing the same issue. I am using default vite svelte template. I have used suggested method in app.svelte but still back and forward browser buttons only changing the url but not the page.

import {router} from 'tinro/cmp/index.js';
router.mode.history(); 

[AlexxNB]

@ansarizafar with Vite try this https://github.com/AlexxNB/tinro/issues/53#issuecomment-811205387

[ansarizafar]

@AlexxNB With the above mentioned change in Vite configuration now back/forward button is changing page but on clicking the button second time not on first click. Is anyone else experiencing the same issue.

[keuller]

@especdevelopment If you use Vite to bundle your application does not forget to add its configuration on your vite.config.js file:

optimizeDeps: {
    exclude: ['tinro']
  }

When I've put it into my configuration all worked fine.

[especdevelopment]

@keuller Thanks for the tip, but unfortunately we are not using Vite. We utilize Svelte as the front-end of our Meteor app. Meteor handles its own bundling. We were still dealing with having to double click forward and back...we LOVE the API for this router, and would love to use it; however, with this still being an issue we cannot seem to resolve we have moved to svelte-navigator for the time being :(

[AlexxNB]

I really cant reproduce this bug. Sorry. I'm not familiar with Meteor. But as I know it worked before. Maybe you can try older versions to determine from which this bug is occurred.

[ansarizafar]

I am not using meteor and I have added optimizeDeps option in vite config but still back button not changing page on first click.

[especdevelopment]

@AlexxNB Totally understood regarding Meteor, and most certainly am not looking to try and have you cater to it. If it's something you cannot fix; no biggie, as it appears the other routers work just fine. All of this said, Meteor is fairly front-end agnostic these days and fully supports Svelte. There has been a reasonable amount of hype around your router in the Meteor community, and we all for sure wanted you to be aware of the issue. Thank you either way for looking into it! :)

[jamauro]

@especdevelopment fwiw, doing either of the following worked in my Meteor Svelte app:

1. importing with 'tinro/cmp/index.js'

import {Route} from 'tinro/cmp/index.js';

2. importing with 'tinro' and setting the router.mode

import {Route, router} from 'tinro';
router.mode.history(); 

[jamauro]

Hmm, I just ran into this issue when navigating between <a> tags. I have to click the browser back button a second time to get back to the previous url.

Interestingly, everything works just fine if you navigate with router.goto, e.g. use a button and on:click={onClick} and then

function onClick() {
  router.goto(/* your url*/)
}

[jamauro]

I changed all of my imports to from 'tinro/cmp/index.js', rebuilt, and opened in an incognito window to test. The browser back button seems to be working as expected. Will update if I run into it again.