[go_router] Path with parameters shows blank screen when refreshed or entered from url bar (web)

[rmahmadkhan]

I'm implementing named routes in my web app to navigate to the details page with id in params.

Whenever I use context.pushReplacementNamed('campaign-details', params: {'id': campId ?? ''});
it goes to proper page in the app and updates the url as it should be

Problem:

But if I put the link directly in browser or press the refresh button of browser, I get a blank screen.

Here's how the url looks like: https://app.my-website.com/campaigns/my-campaign-id
it is also not working on local host.

Here's how the route looks like at the declaration:

GoRoute(
      name: '/campaigns',
      path: '/campaigns',
      pageBuilder: (context, state) =>
          NoTransitionPage(key: state.pageKey, child: const CampaignsScreen()),
      routes: [
        GoRoute(
          name: 'campaign-details',
          path: ':id',
          pageBuilder: (context, state) {
            final id = state.params['id'];
            return NoTransitionPage(
                key: state.pageKey, child: CampaignDetailsScreen(id));
          },
        ),
      ],
),

Versions:

flutter 3.7.1 go_router: ^6.0.6

flutter doctor output

[✓] Flutter (Channel stable, 3.7.1, on macOS 13.0 22A380 darwin-arm64 (Rosetta), locale en-PK)

Checking Android licenses is taking an unexpectedly long time...

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)

[✓] Chrome - develop for the web

[✓] Android Studio (version 2021.3)

[✓] VS Code (version 1.74.3)

[✓] Connected device (2 available)

[✓] HTTP Host Availability

• No issues found!

[exaby73]

Hello @rmahmadkhan. Thank you for filing this issue. Can you please provide the following information?

• A complete and minimal, reproducible code sample. Ideally, a single main.dart file that can be run directly.

Please provide the information in the form of text. See how to make collapsible sections with Markdown here.

[rmahmadkhan]

hi @exaby73, thanks for the quick response.
Actually, someone in community shared a fix mentioned in PR #118684 for some other issue and it also worked for me.

Temporary fix

You can also configure the main.dart.js and flutter_service_worker.js URLs in the index.html file as described in this comment to something that matches your app:

  _flutter.loader.loadEntrypoint({
    entrypointUrl: "/YOUR_APP_BASE/main.dart.js",
    serviceWorker: {
      serviceWorkerVersion: serviceWorkerVersion,
      serviceWorkerUrl: "/YOUR_APP_BASE/flutter_service_worker.js?v=",
    },

That way the files will be requested from their "absolute" URL, rather than URLs relative to the ones specified by the PathStrategy.

(If your base URL is "/", you just need: /main.dart.js and /flutter_service_worker.js?v=)

⚠️ But I would definitely provide a minimal reproducible code soon and keep the issue opened until a proper fix is added to the package or the docs.

[exaby73]

Could you test this with Flutter's master channel, with a newly generated project in master?

[rmahmadkhan]

hi @exaby73
so i created a new project with minimal code to test the go_router: ^6.0.6 on Flutter's master channel. Nested path with parameters turns out be working fine without any effort.

But i keep noticing one thing which was fine a few months back. The routerNeglect option in GoRouter() class. It is not working and you can interact with the buttons on the browser bar.

I also noticed that now there feels no difference between goNamed and pushNamed. Both seems to be working the same way. The expected working is referenced to Flutter Navigation with GoRouter: Go vs Push by Andera

Minimal reproducible code

main.dart file to test go_router on Flutter's master channel

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(const MyApp());
}

final GoRouter router = GoRouter(
  initialLocation: '/',
  routerNeglect: true,
  routes: [
    GoRoute(
      name: '/',
      path: '/',
      pageBuilder: (context, state) =>
          NoTransitionPage(key: state.pageKey, child: const HomeScreen()),
    ),
    GoRoute(
      name: 'list-screen',
      path: '/list-screen',
      pageBuilder: (context, state) =>
          NoTransitionPage(key: state.pageKey, child: const ListScreen()),
      routes: [
        GoRoute(
          name: 'item-screen',
          path: ':id',
          pageBuilder: (context, state) {
            final id = state.params['id'] ?? 'No id found';
            return NoTransitionPage(key: state.pageKey, child: ItemScreen(id));
          },
        ),
      ],
    ),
  ],
);

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'GoRouter Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routeInformationProvider: router.routeInformationProvider,
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Home screen'),
        ElevatedButton(
          onPressed: () {
            context.goNamed('list-screen');
          },
          child: const Text('Home -> List'),
        ),
      ],
    );
  }
}

class ListScreen extends StatelessWidget {
  const ListScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('List screen'),
        ElevatedButton(
          onPressed: () {
            context.pushNamed('item-screen', params: {'id': 'MY-FAKE-ID'});
          },
          child: const Text('List -> Item'),
        ),
      ],
    );
  }
}

class ItemScreen extends StatelessWidget {
  final String id;
  const ItemScreen(this.id, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(id),
        ElevatedButton(
          onPressed: () {
            context.pop();
          },
          child: const Text('Go back'),
        ),
      ],
    );
  }
}

[exaby73]

Hi @rmahmadkhan. Since the issue you initially raised seems to be fixed, please raise separate issues for the other ones you mentioned. Due to this reason, I'll close this issue. Thank you

[rmahmadkhan]

hi @exaby73
yeah, this seems to be fixed on Flutter's master channel. can i know an expected timeline when this will be merged in stable?

[exaby73]

It's not possible to know an exact timeline. This fix may be included in the next stable release, but don't quote me on that :)