question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: react, router.go does not show correct view when n < -1

See original GitHub issue

Prequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x

Current Behavior

Navigating using router.go(n) with an n value less than -1, Ionic React does not show the correct view because it always assumes a delta of 1 or -1.

Expected Behavior

I would expect Ionic React to show the correct view regardless of the delta value.

Steps to Reproduce

  1. Start with one page and push 2 IonPages to navigation stack via navigation.push()
  2. Let the 3rd page navigate back (“history stack pop”) to the first page via navigation.go(-2)
  3. Observe that react’s router does produce the proper URL (path) of the first page. But also observe that the the previous route (page) in the history stack is rendered, not the very first page which belongs to that path.

Code Reproduction URL

https://github.com/larsblumberg/ionic-back-navigation-broken

Ionic Info

No response

Additional Information

This is a continuation of https://github.com/ionic-team/ionic-framework/issues/22563.

At the time of writing, there does not seem to be a straightforward way to implement this. The fix for this in Ionic Vue relied on Vue Router exposing a delta value as well as a custom state object in window.history.state that let us track which view to show. React Router does not expose this kind of information according to https://github.com/remix-run/history/issues/36#issuecomment-233652964 and https://github.com/remix-run/history/issues/334#issuecomment-244250026.

One option is we could build this position tracking into Ionic React ourselves, but I am a bit hesitant to start altering window.history.state especially when React Router already manages the state for us.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:3
  • Comments:5

github_iconTop GitHub Comments

1reaction
kazlauskiscommented, Oct 18, 2021

Is there a workaround for this? How can one return multiple pages back in the history stack? Looks like Ionic 6 RC for React has the same issue.

1reaction
impzerocommented, Aug 21, 2021

I think this issue is also related - https://codesandbox.io/s/wild-cloud-933jc?file=/src/App.js Using history(or router).goBack() more than one time doesn’t work (slightly modified example than the one linked in the original issue) Please note the comments on the 3rd page - When running on iOS / (Safari on macOS) (be it through safari or in a real app) no matter how many calls to .goBack(), it always goes back 1 page (URL also goes back 1 page) On web and android it seems to sometimes work (can’t reproduce when, but after changing between all instances of history / router It seems to not go back any amount of pages (but still updates the URL))

What would be a temporary workaround on iOS / Safari? In our app it seems to work fine on android and web(chrome), running the latest stable versions of ionic-react

is there are workaround for this? this is a huge blocker for me

Read more comments on GitHub >

github_iconTop Results From Across the Web

React router changes url but not view - Stack Overflow
I've added one Router that will handle all routes, I've used Switch component to switch views. But actually, it didn't. Only URL changed...
Read more >
Fixing the 'cannot GET /URL' error on refresh with React ...
In this post you'll learn how to fix the 'cannot GET /URL' error with ... React Router will then take over and load...
Read more >
Migrating to React Router v6: A complete guide
Migrate your React Router applications from v5 to v6 with this in-depth guide, including a review of additions and improvements from v5.
Read more >
Reconciliation - React
React provides a declarative API so that you don't have to worry about exactly ... this in React, displaying 1000 elements would require...
Read more >
Tutorial v6.4.0-pre.14 - React Router
If you're not going to follow along in your own app, you can skip this section ... You'll now see the root layout...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found