"There was no corresponding route" through Flutter web URL

Question

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()));

Answer 1

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());

Answer 2

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),
      },
    );
  }
}