react-router - 使用带有基本名称的推送时的双基本路径

Question

我遇到了一个问题，我一直在试图弄清楚是我只是做错了什么，还是一个真正的错误。经过大量搜索，我仍然无法确定是我做错了什么，还是发现了实际问题。

我之所以如此困惑，部分原因还在于我发现 react-router 和 history 之间的交集有点令人困惑。我花了一段时间才弄清楚如何将 history 的增强器功能与 react-router 一起使用，我仍然认为问题可能就在那里。

我这里有一个测试用例:

• https://github.com/trodrigues/react-router-basename-test
• http://trodrigues.github.io/react-router-basename-test/

问题是:

• 单击该按钮会发出 this.context.router.push 调用以导航到 /content/path
• 我希望它导航到 http://trodrigues.github.io/react-router-basename-test/content/path
• 而是导航到 http://trodrigues.github.io/react-router-basename-test/react-router-basename-test/content/path

一些额外的细节:

• 如果我使用 <base>标签而不是 useBasename增强器这很好用。但是，考虑到我的开发和生产设置略有不同，使用环境变量来定义基本路径会更有帮助，而不是操纵 <base>在构建时标记。
• 我上传的示例应用是我正在开发的应用的最小子集。我删除了所有其他无关紧要的内容。
• 在将基本路径设置为空字符串的情况下在本地运行此问题不会发生。

Answer 1

经过进一步调查，我发现了 react-router already uses useBasename 增强器在使用 useRouterHistory 时，这是导致问题的原因，因为增强器被执行了两次。