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

Question

我正在尝试使用 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 上的配置，但一切都已启用并正常工作，就像答案所说的那样。

Answer 1

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

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

<base href="/" />

Answer 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。