Questions about AutoRoute's nested routing snippet

[InMatrix]

I was reviewing the nested routing snippet for AutoRoute and had a few questions and observations:

1. There seems to be no nesting of routes in this snippet, which does work properly from the end-user's perspective. The two inner tabs are controlled via a path parameter of the BooksScreen. The mismatch between my expectation and the implementation might be related to the unsettled definition of nested routing discussed in Clarify Nested Routing scenario #35. We should probably pick up that discussion and come up with a vocabulary to bridge user-facing requirements and implementation methods.
2. Switching to a tab in the TabBar was done using the navigateTo method (L124). I was curious what is the advantage of using navigateTo over push.

context.navigateTo(AppRoute(
  children: [
    BooksRoute(tab: _tabs.elementAt(index)),
  ],
));

3. In the above snippet, I wasn't sure why AppRoute needs to be specified. I tried to change the code to the following:

context.navigateTo(
  BooksRoute(tab: _tabs.elementAt(index)),
);

While the tab switching still worked, the URL stopped to reflect the tab selection. I'd like to understand what had caused that. Thanks!

Cc: @theweiweiway @Milad-Akarie @chunhtai

[chunhtai]

The nesting happens in AutoTabsRouter. The child of the builder will change based on it is books/* or Settings

I will leave the other questions to the package author.

[InMatrix]

I think AutoTabsRouter controls the BottomNavigationBar for switching between /books the /settings. The two top tabs within /books seem to be controlled by AppRoute. This brings up an interesting question about the hierarchy of routes in this example. Which is nested in which exactly?

[chunhtai]

The routing content is nested in the scaffold, so when the route changes the scaffold is not recreated, only the body will be updated.

[theweiweiway]

hey all, to address 2., navigateTo is basically an enhanced version of push. What it does is:

• if the route you are navigating to is already in the stack, it will pop to that route.
• if the route does not exist in the stack, it will push it to the stack (and not pop anything)

when using push, it will simply always just push to the top of the stack

@Milad-Akarie -sama to chime in

[Milad-Akarie]

@InMatrix in a StackRouter navigate will check if the route already exists in stack then pops until that route and updates it otherwise it pushes it as a new entry.
in a TabsRouter navigate will activate the index associated with the passed route and updates it.

Updating the route includes updating it's inner/sub tree controller if it has one.

let's say we have a root level route /books that has two nested routes [new,all] and we're at /books/new,
navigating to /books/all will just updated /books because it didn't change but since /books has a sub router, navigate will be called on that sub router with the rest of unprocessed segments -> booksSubRouter.navigate('all')

as for your third point, it was enhanced in the latest release and the following code will work the same.

context.navigateTo(
  BooksRoute(tab: _tabs.elementAt(index)),
);

[InMatrix]

@Milad-Akarie Thank you for your explanation.

I upgraded auto_route to 2.2.0 and regenerated the code for the nested routing scenario. However, I still didn't see the URL update according to the tab selection within the books page, when I switched the simplified argument for context.navigateTo. Please see the screen recording below. The changes I made are in this PR: #66. Did I miss something? FWIW, I noticed that the latest version of auto_route_generator is still 2.1.0.

Screen.Recording.2021-05-13.at.2.10.50.PM.mov

[theweiweiway]

Just tried this - the reason why it isn't working is because of the change to

context.navigateTo(
  BooksRoute(tab: _tabs.elementAt(index)),
);

If we revert it back to

context.navigateTo(AppRoute(
  children: [
    BooksRoute(tab: _tabs.elementAt(index)),
  ],
));

it works as intended. I think this is just a bug, @Milad-Akarie to confirm.

Screen.Recording.2021-05-14.at.8.03.08.PM.mov

[InMatrix]

@theweiweiway, thanks for checking. I made the change because @Milad-Akarie mentioned that the last version of auto_route doesn't require specifying the full route hierarchy when using context.navigateTo. I was curious if I updated to the latest version correctly.