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

Question

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

在我继续之前，我必须说我已经阅读了这些问题 and 。我设法使它起作用，但仅适用于第一个 url.

例如，我有一个包含所有 post 的博客页面，可通过此 url mysite.com/blog 访问。这个很好用，如果我刷新页面，一切都会重新加载。

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

// 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

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

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

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

从而导致 404。

如果这没有帮助，您的代码片段看起来不错，那么问题可能在于 post.url returns.

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

Answer 2

嗯，在查看了我使用的其他一些项目后 Angular，我注意到一件事，它比我想象的要容易。

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

<base href="/" />

Answer 3

这个 htaccess 对我有用 react 和 angular

<IfModule mod_rewrite.c>
RewriteEngine on

# -- REDIRECTION to https (optional):
# If you need this, uncomment the next two commands
# RewriteCond %{HTTPS} !on
# RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
# --

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d

RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]
</IfModule>

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

Refresh page on apache with React doesn't work

.htaccess

reactjs

react-router-v4