Question

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

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

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

但是，当我尝试使用动态网址访问单个帖子时，该页面无效。例如，我有这个路由器设置：

// 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上时，它会从.css加载.js和mysite.com个文件。

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

我做了Stuffix在回答中所说的，检查网址定义以及我的apache的配置，但是所有内容都启用并正常工作，就像答案所说的那样。

Answer 1

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

但在你的<NavLink />中，由于你错过了斜线，你指向/blog/post/this-is-my-first-post。

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

因此导致了404。

如果这没有帮助，那么您的代码段看起来很好，因此问题可能出在post.url返回的内容上。

另外，你的.htaccess看起来很好，所以我会说你可能错过了像Apache AllowOverride all这样的Apache配置中的内容。请参阅this answer。

Answer 2

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

只需在我base的{{1}}上添加标记head。

index.html

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

2 个答案: