"not found" when reload page on flutter web

Question

On flutter web when I reload a page on Chrome I get the text "not found". How can I fix it? this is my code of the main.dart. I also noticed that to get directly to a page I have to insert an hash symbol (#) in the url like this: "http://127.0.0.1:8080/#/homepage". Is there a way to remove it?

class MyApp extends StatefulWidget {

const MyApp({Key key}): super(key: key);

@override
MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
// This widget is the root of your application.

@override
  void initState() {
  html.window.history.pushState(null, "Home", "/");
  super.initState();
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    initialRoute: "/",
    theme: ThemeData(
      primarySwatch: Colors.blue,
      fontFamily: 'GoogleSansRegular'
    ),
    routes: {
      "/": (context) => HomePage(),
      "/homepage": (context) => HomePage(),
      "/secondPage": (context) => SecondPage()
    },
  );
}
}

Answer 1

to remove the # in the URL you have to switch to set the UrlStrategy, like it´s descriped here: https://docs.flutter.dev/development/ui/navigation/url-strategies

Long Story short: Add this package (https://pub.dev/packages/url_strategy) to pubspec.yaml and call setPathUrlStrategy() in your main method:

import 'package:url_strategy/url_strategy.dart';

void main() {
  // Here we set the URL strategy for our web app.
  // It is safe to call this function when running on mobile or desktop as well.
  setPathUrlStrategy();
  runApp(MyApp());
}

Maybe it also solves your other problem. If not, then i think it´s a good idea to use the AutoRoute package: https://pub.dev/packages/auto_route