从 url 中删除 # 后无法通过更改 url 在 flutter web 中导航

Question

我可以通过在搜索栏中输入网址来更改托管在 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 时，它显示页面未找到错误。

Answer 1

我遇到了同样的问题，并通过将

.htaccess

 文件添加到托管站点的 

index.html

 旁边来修复它，并使用以下配置：

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

Answer 2

我在 web 文件夹中的index.html 旁边创建了一个文件

/* /index.html 200 文件调用“_redirects”并为我工作

Answer 3

要使用 netlify 解决此问题，您只需创建一个包含以下内容的

_redirects

 文件并将其放入 Flutter 构建文件所在的目录中

/* /index.html 200

Answer 4

我找到了这个问题的解决方案，至少就我而言，我最好的猜测是，在免费部署中配置路径域以测试 Surge、netlify 甚至 Firebase 托管等网站的方式破坏了 setPathURl() 的功能。我使用了之前购买的一个域名，它的工作原理就像一个魅力，但如果我尝试使用 firebase 托管域名访问同一个网站，它就不起作用。

使用真实域名来测试usePathUrlStrategy的功能

Answer 5

对于Web项目，路径URL策略需要按照官方文档中给出的单独调用和分配。

https://flutter.dev/docs/development/ui/navigation/url-strategies 我在项目中设置了路径 URL 策略，如下所示，

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

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

仅供参考，我还托管了它进行生产并且运行良好。

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