[bug]: bottom nav bar example shows wrong selected nav bar item after browser refresh

[mraaz97]

Describe the bug

The bottom nav bar example demonstrates the usage of the NestedRouter() with an AppBar() Widget. Selecting the NavBar Item 'History' e.g. will select the item and leads to this url: .../bottom-nav-example/history-view. After refreshing the browser, the url is still the same as expected and also shows the HistoryView but the favorites icon is selected.

To reproduce

1. Run router_example
2. Navigate to history view via the app bar item
3. Refresh the browser
4. HistoryView is shown but Favorites Icon is selected

Expected behavior

Since there are many scenarios where Nested Routing is used with an appbar the expected behavior in web would be to see the correct nav bar item selected.

Screenshots

Additional Context

No response

[FilledStacks]

@mraaz97 yes, I actually saw this when I migrated the web app. It can be fixed using exactly this technique to get the url path id and match it with the tab.

When we get some time we will update the example to include this information. Thank you for creating the issue. It will help make sure it doesn't slip through the cracks.

[FilledStacks]

Fix the issue in the example using the described solution.

[ferrarafer]

@mraaz97 where is the example app you mentioned? I wanna work on this bug.

[mraaz97]

Hi @ferrarafer, you can find it here: https://github.com/Stacked-Org/stacked/blob/master/example/router_example/lib/ui/bottom_nav/bottom_nav_example.dart

[FilledStacks]

🎉 This issue has been resolved in version 3.4.0 🎉

The release is available on:

• v3.4.0
• GitHub release

Your semantic-release bot 📦🚀