Skip to content

Layout + notFoundPath + usePathUrlStrategy() not compatible #32

@RyanHolanda

Description

@RyanHolanda

I'm trying to set the param notFoundPath on Routefly.routerConfig at Flutter Web. But soon as I type a path that does not exist, it throws me:

DartError: Navigator.onGenerateRoute was null, but the route named "/" was referenced.
To use the Navigator API with named routes (pushNamed, pushReplacementNamed, or pushNamedAndRemoveUntil), the Navigator must be provided with an onGenerateRoute handler.

I noticed it happens only if I have both:

  1. A Layout (RouterOutlet)
  2. And using usePathUrlStrategy() in the main function to remove the '#' from the app url.

If I use only one of them, it works. But I need to use both on my app.

I've started a fresh Flutter project to test if it happens in new projects, and it does still happen.

Here is my folder structure in the fresh project:
Image

And here is my main.dart

import 'package:flutter/material.dart';
import 'package:flutter_web_plugins/url_strategy.dart';
import 'package:routefly/routefly.dart';

import 'main.route.dart';

part 'main.g.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  usePathUrlStrategy();
  runApp(const MyApp());
}

@Main("lib/app")
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routerConfig: Routefly.routerConfig(
        routes: routes,
        initialPath: "/dale_route",
        notFoundPath: "dale_route_two",
        routeBuilder: (context, settings, child) => PageRouteBuilder(
          settings: settings,
          transitionDuration: Duration.zero,
          reverseTransitionDuration: Duration.zero,
          pageBuilder: (_, __, ___) => child,
        ),
      ),
    );
  }
}

The app_layout.dart file only contains a scaffold and the Router Outlet widget

How to reproduce

  1. Start a new Flutter Web Project
  2. Add Routefly and configure it
  3. Add flutter_web_plugins (to remove the hash in the url). it should be added as a sdk: flutter dependency
  4. Add a notFoundPath in Routefly.routerConfig
  5. Add usePathUrlStrategy(); in the main of the App
  6. Create an Router outlet
  7. Generate routefly code (After creating the outlet)
  8. Try to navigate to a non-existing path
  9. The error is thrown
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions