Search code examples
flutterflutter-web

flutter web why is there a hashtag in the url?


I want to know why is there a hashtag in the URL? for the Flutter web app, eg: http://localhost:64392/#/home even in production same result.

I want to know why and also if possible to remove it?


Solution

  • To remove the # in the URL, it is documented here:

    To configure Flutter to use the path instead, use the usePathUrlStrategy function provided by the flutter_web_plugins library in the SDK:

    import 'package:flutter_web_plugins/url_strategy.dart';
    
    void main() {
      usePathUrlStrategy();
      runApp(ExampleApp());
    }
    

    And add this to your pubsepc.yaml:

    dependencies:
      flutter:
        sdk: flutter
      flutter_web_plugins:
        sdk: flutter
    
    

    Additionally, you can use the go_router package.

    See turning off the hash:

    void main() {
      // turn on the # in the URLs on the web (default)
      // GoRouter.setUrlPathStrategy(UrlPathStrategy.hash);
    
      // turn off the # in the URLs on the web
      GoRouter.setUrlPathStrategy(UrlPathStrategy.path);
    
      runApp(App());
    }