GoRouter: Refresh on page looses Back Button

Question

I have a home screen and a detail page. When I navigate to the detail page, Flutter automatically adds a back button in the AppBar that when clicked, goes back to the previous page.

Now using GoRouter, the UrlPathStrategy.path allows that my detail page is at /detail and when refreshing the page, it opens the detail page directly. This is all good, however, the problem is, there is no back button after refreshing at /detail.

Is there a concept, such that GoRouter can infer the Navigation stack based on the route and thus when opening the /detail page, show a back button that leads to / (home page)?

My current routes look something like this:

routes: [
  GoRoute(
    name: "detail",
    path: "/detail",
    builder: (context, state) => DetailPage(),
  ),
  GoRoute(
    name: "home",
    path: "/",
    builder: (context, state) => HomePage(),
  ),
],

score 3 · Answer 1 · answered Sep 22 '22 at 17:43

3

Probably just put detail route inside home route?

routes: [
  GoRoute(
    name: "home",
    path: "/",
    builder: (context, state) => HomePage(),
    routes: [
      GoRoute(
        name: "detail",
        path: "/detail",
        builder: (context, state) => DetailPage(),
      ),
    ],
  ),
],

answered Sep 22 '22 at 17:43

Faruk

5,438
3
30
46

unfortunatly this is not the solution because I can go to the detail page from other pages other than the home page and thus I can't have the details page at `/home/detail` – Jonas Sep 29 '22 at 13:17
2

you can go from anywhere to detail, but once in detail and user click back, it will be back to home. That one of amazing feature from go router that I like – Faruk Sep 29 '22 at 13:22
2

Yes thats exactly my problem. Imagine I have a home page and a list page. From both pages I can go to detail page. When I put the detail page as a child route of home, the back button will always go to home. But when I go to detail from the list page, I want to go back to list page and not home page – Jonas Sep 29 '22 at 13:28
then you can keep router like above, but when you're in list page you navigate with context.push, it will respect the current route, but when you go from deeplink or home, you can use context.go – Faruk Sep 29 '22 at 14:23
1

I am in the same situation. I feel like @Faruk solution is not ideal, since it won't have a "native feeling" in web. I'd go to a details screen and I wouldn't see the URL being updated. One thing should be the "stack of pages" and another the "route hierarchy" – Guillem Poy Dec 22 '22 at 12:08

score 0 · Answer 2 · answered Mar 21 '23 at 18:05

Since you are on the page that you know you can just use the go_router pushReplacement instead of the refresh

the following is from the router.dart

  /// Replaces the top-most page of the page stack with the given URL location
  /// w/ optional query parameters, e.g. `/family/f2/person/p1?color=blue`.
  ///
  /// See also:
  /// * [go] which navigates to the location.
  /// * [push] which pushes the location onto the page stack.
  void pushReplacement(String location, {Object? extra}) {
    routeInformationParser
        .parseRouteInformationWithDependencies(
      RouteInformation(location: location, state: extra),
      // TODO(chunhtai): avoid accessing the context directly through global key.
      // https://github.com/flutter/flutter/issues/99112
      _routerDelegate.navigatorKey.currentContext!,
    )
        .then<void>((RouteMatchList matchList) {
      routerDelegate.pushReplacement(matchList);
    });
  }

It works just great :)

GoRouter: Refresh on page looses Back Button

2 Answers2