使用 React 在 apache 上刷新页面不起作用

Posted 2023-02-22

【中文标题】使用 React 在 apache 上刷新页面不起作用

【英文标题】：Refresh page on apache with React doesn't work

【发布时间】：2017-09-25 20:37:15

【问题描述】：

我正在尝试使用 React 创建 SPA，但在尝试重新加载页面时遇到了问题。

在我继续之前，我必须说我已经阅读了这些问题this 和this。我设法使它工作，但仅适用于第一个网址。

例如，我有一个包含所有帖子的博客页面，通过此 URL mysite.com/blog 访问。这个工作正常，如果我刷新页面，一切都会重新加载。

但是，当我尝试使用动态 url 访问单个帖子时，页面无法正常工作。例如，我有这个路由器设置：

// Definiton
<Route path="/post/:url" component=Post />

// Link
<NavLink to="post/" + post.url>...</NavLink>

// Url on the browser
mysite.com/post/this-is-my-first-post

在这种情况下，它不起作用。这是我的.htaccess 文件：

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteBase /
    RewriteRule ^index.html$ - [L]
    RewriteCond %REQUEST_FILENAME !-f
    RewriteCond %REQUEST_FILENAME !-d
    RewriteRule . /index.html [L]
</IfModule>

---

在查看了更多问题后，我注意到它试图从不同的位置加载主文件。例如，当我在页面mysite.com/blog 上时，它正在从mysite.com 加载.css 和.js 文件。

但是当我是页面mysite.com/post/this-is-my-first-post 并刷新页面时，它会尝试从目录mysite.com/blog 加载.css 和.js 文件。

我按照 Stuffix 在回答中所说的去做，检查 url 定义以及我的 apache 上的配置，但一切都已启用并正常工作，就像答案所说的那样。

【问题讨论】：

你在使用 Webpack 吗？

【参考方案1】：

好吧，在查看了我使用 Angular 的其他一些项目之后，我注意到了一件事，而且比我做的要容易。

只需在我的index.html 的head 上添加标签base。

<base href="/" />

【讨论】：

我使用.htaccess 将所有子目录路径（通过ResourceFallback）重写回我的“根”文件夹的index.html 并遇到了这个问题。在我所有的.htaccess 尝试中，你的解决方案也对我有用。

【参考方案2】：

在您的<Route /> 中，您声明发布路线是/post/this-is-my-first-post，这是正确的。

但是在你的<NavLink /> 中，你指向/blog/post/this-is-my-first-post，因为你错过了一个斜线。

<NavLink to="post/" + post.url>...</NavLink>
              | here

因此导致 404。

---

如果这没有帮助，您的 sn-p 看起来不错，所以问题可能出在 post.url 返回的内容上。

另外，您的 .htaccess 看起来不错，所以我想说您可能错过了 Apache 配置中的某些内容，例如 AllowOverride all。见this answer。

【讨论】：

我更新了我的问题。我试着按照你说的做，但没有解决。此外，主要问题不是导航到帖子网址，我可以做到这一点。问题是当我在地址栏上键入 url 或在该页面上尝试刷新时。