Flutter Web配置PathUrlStrategy后地址栏URL显示异常排查

URL自动跳回根路径是三个配置错误共同导致的：

• 顶层MaterialApp同时配置了routes路由表和home属性：Flutter中home属性优先级高于路由表，只要设置了home，应用启动时会强制加载home对应的页面，同时把浏览器地址栏重置为根路径，覆盖用户直接访问的深层链接。
• 每个子页面内部都嵌套了独立的MaterialApp：整个Flutter应用只需要顶层一个MaterialApp作为路由根节点，嵌套多个MaterialApp会打断路由栈的传递，导致路由状态和浏览器地址栏不同步。
• 路由表缺少根路径/的映射规则：你要求访问根域名时跳转HomePage，但原路由表只配置了/home和/profile，初始路径/匹配不到对应路由时会自动fallback到home配置的页面。

1. 修改main.dart #

删除home属性，补全根路径的路由映射，遵循Dart类名大驼峰规范：

import 'package:flutter/material.dart';
import 'package:fotografci_sitesi/pages/home.dart';
import 'package:fotografci_sitesi/pages/profile.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  setUrlStrategy(PathUrlStrategy());
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        // 根路径映射到首页
        '/': (context) => const HomePage(),
        HomePage.route: (context) => const HomePage(),
        ProfilePage.route: (context) => const ProfilePage(),
      },
    );
  }
}

2. 修改pages/home.dart #

删除页面内嵌套的MaterialApp，直接返回页面组件，类名改为大驼峰格式：

import 'package:flutter/material.dart';
import 'package:fotografci_sitesi/pages/profile.dart';

class HomePage extends StatefulWidget {
  static const String route = '/home';
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Home"),
      ),
      body: Column(
        children: [
          OutlinedButton(
            child: const Text("Profile"),
            onPressed: () {
              Navigator.of(context).pushNamed(ProfilePage.route);
            },
          ),
        ],
      ),
    );
  }
}

3. 修改pages/profile.dart #

删除重复导包、嵌套的MaterialApp，类名改为大驼峰格式：

import 'package:flutter/material.dart';

class ProfilePage extends StatefulWidget {
  static const String route = '/profile';
  const ProfilePage({super.key});

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Profile"),
      ),
      body: const Center(
        child: Text("Profile"),
      ),
    );
  }
}

修改后所有路由规则均可正常生效：

• 访问example.com加载HomePage，地址栏保持/
• 访问example.com/home加载HomePage，地址栏保持/home
• 直接访问example.com/profile加载ProfilePage，地址栏不会跳回根路径，保持/profile
• 页面内点击跳转按钮可正常同步URL与页面内容

内容的提问来源于stack exchange，提问作者Emir Bolat