没有处理 React 的斜杠

Question

我有一个问题，网址 /covid19/ 有效，但 /covid19 无效（末尾没有斜线）。

当您检查网络请求时，似乎是向 / 而不是 /covid19/ 发出请求

/covid19（无斜线）

/covid19/（带斜线）

我不确定这是否与 React 的路由器有关，这是我的配置：

ReactDOM.render(
  <React.StrictMode>
    <Router history={history}>
      <Route path={"/covid19"} component={dashboard}/>
      <Route path={"/"} component={dashboard}/>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

该网站是： https://datcom-website.uc.r.appspot.com/covid19/

我的服务器在 App Engine 实例上运行。

Answer 1

问题在于如何在 HTML 中包含脚本，而不是任何与 JS 或 React 相关的内容。

您的脚本来源是相对的 - ./path-to-script；这使得它依赖于 URL。因此，从页面domain.com/exampleA 到脚本的路径是domain.com/path-to-script，但只要在 URL 中添加另一个级别，甚至只是一个斜线，相对路径就会改变。例如，domain.com/exampleA/ 生成路径 domain.com/exampleA/path-to-script。

您应该改用绝对路径。在大多数情况下，只需删除开头的 . 就足够了。以/ 开头的源路径意味着它位于域的根级别。因此，无论 URL 是什么，/path-to-source 的来源始终会产生 domain.com/path-to-script。

因此，对于您的用例，您的脚本似乎需要更改为

<script src="/covid19/static/js/2.8cd0c9f0.chunk.js"></script>
<script src="/covid19/static/js/main.05f82414.chunk.js"></script>