从 url 中删除 # 后，无法通过更改 url 在 Flutter Web 中导航答案

【问题标题】：unable to navigate in flutter web by changing url after removing # from the url从 url 中删除 # 后，无法通过更改 url 在 Flutter Web 中导航
【发布时间】：2021-08-17 19:43:42
【问题描述】：

我可以通过在搜索栏中键入 url 来更改我在 netlify（手动部署）上托管的 flutter web 的 url 来导航到其他页面，如下所示：-

因此，如果我将 /home 更改为 /about，那么它会完美地引导我进入 about 页面。但是要从我的网址中删除这个“#”，我在 main.dart 中添加了以下代码 我的代码：-

import 'package:url_strategy/url_strategy.dart';

void main()async {
  await Firebase.initializeApp();
  setPathUrlStrategy();//this removes the '#' from my url
  FluroRouting.setupRouter();
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My Website',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/home',
      onGenerateRoute: FluroRouting.router.generator,
    );
  }
}

路由的代码是：-

class FluroRouting {
  static final router = FluroRouter();
  static Handler _aboutUsHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          AboutUs());
  static Handler _homeHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          HomePage());
  static void setupRouter() {
    router.define('/home', handler: _homeHandler,);
    router.define('/about', handler: _aboutUsHandler,);
  }
  static void navigateToPage({String routeName,BuildContext context}) {
    router.navigateTo(context, routeName, transition: TransitionType.none);
  }
  static void pushAndClearStackToPage({String routeName,BuildContext context}) {
    router.navigateTo(context, routeName, clearStack: true,transition: TransitionType.none);
  }
}

这样做后，'#' 被成功删除，但是当我将 /home 更改为 /about 时，它显示页面未找到错误。

【问题讨论】：

您在web/index.html 中是否将<base href="/"> 更改为href="/"？这有更好的解释。 stackoverflow.com/a/65709246/11855654
@ChiragBargoojar 我不认为 OP 的问题是他在不同的根位置托管。他提到when changing /home to /about他正面临这个问题。
Deepak 发布setPathUrlStrategy 函数的代码。你在里面做什么？
是从url策略依赖导入的函数
@DeepakLohmod 您找到解决此问题的方法了吗？使用 url_strategy 包删除 # 后我面临同样的问题。

标签： flutter flutter-dependencies flutter-web netlify

【解决方案1】：

我找到了解决这个问题的方法，至少在我的情况下，我最好的猜测是在免费部署中配置路径域以测试像浪涌、netlify 甚至 Firebase 托管这样的网站的方式破坏了 setPathURl 的功能（）。我使用了一个我之前购买的域，它的作用就像一个魅力，但如果我尝试使用 firebase 托管域访问同一个网站，它就不起作用了。

使用真实域测试 usePathUrlStrategy 的功能

【讨论】：

我有自己的域名（真实的）

【解决方案2】：

路径 URL 策略应单独调用并按照 web 项目的官方文档中给出的分配。

https://flutter.dev/docs/development/ui/navigation/url-strategies

我在我的项目中设置路径 URL 策略如下，

void main() {
  configureApp();
  runApp(MyApp());
}

void configureApp() {
  setUrlStrategy(PathUrlStrategy());
}

仅供参考，我也将它托管用于生产，它工作正常。

您还可以发布有关如何分配路线的代码吗？

【讨论】：

试过了，但是没用，添加了我的路由代码

【解决方案3】：

我遇到了同样的问题，并通过将.htaccess 文件添加到index.html 旁边的托管站点来修复它，配置如下：

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]

【讨论】：