"There was no corresponding route" through Flutter web URL

user_7385346 0
Viewed 3366

I am using named routes for navigation in my Flutter Web application. When navigating to the desired route the URL updates but I cannot navigate directly to the route through the URL bar. Every time I try adding a path in the URL it takes me to ".../#/"

When performing a hot reload with an updated URL I get the following error:

Could not navigate to initial route.
The requested route name was: "/Page_One"
There was no corresponding route in the app, and therefore the initial route specified will be ignored and "/" will be used instead.

class Start extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Site',
      theme: ThemeData(...),
      initialRoute: '/',
      routes: <String, WidgetBuilder> {
        "/": (context) => MainPage(),
        "/Page_One": (context) => Page2(0),
        "/Page_Two": (context) => Page2(1),
        "/Page_Three": (context) => Page2(2),
      },
    );
  }
}

EDIT: I have also tried this with onGenerateRoute with no luck.

EDIT2: I am calling these both on a production URL and localhost (ex. http://localhost:12345/#/Page_Two. No, localhost:12345/Page_Two and localhost:12345/#Page_Two do not work either.

Edit3: I am calling runApp by void main() => runApp(new MaterialApp(home: Start()));

flutter-web flutter routes
2 Answers

The reason for this is that you are returning your Start widget in another MaterialApp.

The first MaterialApp widget you return will try to handle the incoming URL.

So your structure is as follows:

-- entrypoint (runApp)
MaterialApp
  Start -- your widget
    MaterialApp
      // the routes live here

The first MaterialApp has no routes, which causes the error.

Consequently, the only change you need to make is to transform your structure into this:

-- entrypoint (runApp)
Start -- your widget
  MaterialApp
    // the routes live here

Code

Change your void main() => runApp(new MaterialApp(home: Start())); to the following:

void main() => runApp(Start());
user_65097510

What about this ?

class Start extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Site',
      theme: ThemeData(...),
      initialRoute: '/',
      routes: <String, WidgetBuilder> {
        "/": (context) => MainPage(),
        "/Page_One": (context, {p=0}) => Page2(p),
        "/Page_Two": (context, {p=1}) => Page2(p),
        "/Page_Three": (context, {p=2}) => Page2(p),
      },
    );
  }
}
user_123340120
Related