如何为React Web应用配置Branch动态深度链接（桌面端）

针对你遇到的桌面端Branch链接重定向后参数丢失、路由未正确触发的问题，我整理了一套具体的配置方案，核心是让Branch把路径和参数正确注入到#后的哈希路由部分：

1. 正确创建Branch链接（含动态参数） #

不要直接在Branch链接后拼接Query参数（这是你之前尝试的错误方式），而是通过Branch Dashboard或API将参数嵌入到链接的元数据中：

• 设置哈希路由路径：在Branch链接配置里指定$deeplink_path为你的React路由路径，比如/project/123（对应你想要的#/project/123部分）。
• 添加自定义参数：直接在链接的自定义数据字段中添加apt=ITEM_DETAILS和apid=456，这些参数会被Branch保留并传递到重定向后的URL。

2. 配置Branch Web重定向规则（关键） #

这一步是让Branch把路径和参数放到#后面的核心：

• 进入Branch Dashboard的「Link Settings」→「Redirects」→「Web Redirects」。
• 设置你的Web目标URL为http://test.com/app/#/。
• 开启「Append Deep Link Path to Destination URL」，并选择将路径附加到After the #（确保$deeplink_path被放到哈希路由里）。
• 开启「Append Custom Parameters to Destination URL」，并选择将参数附加到Hash Fragment（这样apt和apid会被放到#后的Query里，而不是主URL的Query）。

如果是通过Branch API创建链接，可以在请求中直接指定这些重定向参数：

// 示例API请求参数（Node.js）
const branchParams = {
  "$deeplink_path": "/project/123",
  "apt": "ITEM_DETAILS",
  "apid": "456",
  "$web_redirect_url": "http://test.com/app/#/",
  "$web_append_path": true,
  "$web_append_params_to_fragment": true
};

3. React端参数与路由处理 #

重定向完成后，你的React应用会拿到类似http://test.com/app/#/project/123?apt=ITEM_DETAILS&apid=456的URL，此时可以通过两种方式处理：

• 路由解析：如果使用react-router-dom，可以通过useLocation()钩子获取哈希中的参数，或者用useSearchParams()（注意需要配置路由支持哈希模式）。
• Branch SDK获取：集成Branch Web SDK后，调用branch.data()可以直接获取传递的apt和apid参数，无需手动解析URL，这种方式更可靠，尤其是参数复杂的场景。

4. 测试与调试 #

使用Branch的「Link Debugger」工具测试你的链接，查看重定向后的URL结构是否符合预期，确认#后的路径和参数是否正确。

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