Firebase Dynamic Link路由失效：跳转首页或报无效链接错误

1. 动态链接结构使用错误 #

你直接在短链接后拼接路径（比如https://abcde.page.link/7pqr/heroes）或参数（比如https://abcde.page.link/7pqr?route=heroes）的方式不符合Firebase动态链接的规则。每个短链接是一个独立的预配置实例，额外拼接的内容会被判定为无效路径，导致跳转失败或提示"Invalid Dynamic Link"。

正确做法是在创建动态链接时就指定完整的带路由目标URL，而非事后拼接。

2. 目标URL未正确配置 #

无论通过Firebase控制台还是SDK创建动态链接，必须将目标URL设置为你实际想要跳转的Angular路由地址：

• 控制台创建：在「动态链接目标」输入框中填写https://myproject.web.app/heroes或https://myproject.web.app/detail/13
• SDK创建：设置link参数为完整路由地址，比如：

  const dynamicLink = await firebase.dynamicLinks().buildLink({
    link: 'https://myproject.web.app/heroes',
    domainUriPrefix: 'https://abcde.page.link'
  });
  

3. Angular单页应用路由适配验证 #

虽然你说项目线上运行正常，但仍需确认Firebase Hosting的firebase.json中已配置rewrites规则，确保所有路由请求都指向index.html，否则动态链接跳转后Angular无法解析路由：

{
  "hosting": {
    "public": "dist/tour-of-heroes",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

4. 查询参数传递的正确方式 #

如果想用查询参数传递路由信息（比如?route=heroes），需将完整的带参数URL作为动态链接的目标，比如https://myproject.web.app/?route=heroes，然后在Angular中通过ActivatedRoute读取查询参数并导航：

constructor(private route: ActivatedRoute, private router: Router) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const route = params['route'];
    if (route) {
      this.router.navigate([route]);
    }
  });
}

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