[web] app crashes after hitting url directly in browser

Steps to Reproduce

Add two named routes to app using "routes" property of MaterialApp class.
Add two button to each widget.on click of button navigate between screens
Navigation works with button click but if you hit url directly in browser or refresh the page then app crashed.It will not work with bookmarked pages.

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

** Code **

// my app widget
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo!!!',
      home: Home(),
      routes: {'home': (_) => Home(), 'product': (_) => Product()},
    );
  }
}

// product widget

class Product extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Text('Product'),
          FlatButton(
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  'home',
                );
              },
              child: Text('click'))
        ],
      ),
    );
  }
}

// home widget
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Text('Home'),
          FlatButton(
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  'product',
                );
              },
              child: Text('click'))
        ],
      ),
    );
  }
}

I think it's because the framework expects a slash in your route name, e.g. "/product", but in your routes configuration you don't includes slashes. Having said that, perhaps we should handle this better, so I'll schedule this for a review in the near term.

@mdebbar

/cc @mdebbar

@yjbanov

@yjbanov with route name "/product", it works.Page reload takes more time to load compared to routing.

@imnikhilp

@imnikhilp I'm planning to look into this today. There are 2 areas that might be causing this issue:

The web engine prepends "/" to the path in some cases.
The flutter Navigator slices the initial route name using slashes, and I need to check if that logic works or not when there's no leading slash.

I am getting this error except I do have a slash in front of my route name.

      routes: {
        "/": (context) => HomePage(),
        "/teams": (context) => HomePage(),
      },

This error occurs when the web browser is refreshed when on the /teams page. Adding routes for "teams" and "//teams" doesn't help.

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

@mdebbar

@mdebbar Were you able to find the problem? Let me know how I can help.

Any updates.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

[web] app crashes after hitting url directly in browser #50639

Steps to Reproduce

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[web] app crashes after hitting url directly in browser #50639

Description

Steps to Reproduce

Activity

yjbanov commented on Feb 13, 2020

yjbanov commented on Feb 13, 2020

imnikhilp commented on Feb 14, 2020

mdebbar commented on Feb 14, 2020

thasmin commented on Feb 14, 2020

thasmin commented on Feb 17, 2020

flutterdev-vinit commented on Mar 31, 2020

lock commented on Apr 25, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions