反应路由器参数-Apache服务器上的页面刷新失败

时间:2019-01-09 20:05:19

标签: reactjs react-router

我正在使用react router 4的服务器上使用Apache,并为特定路由进行了简单设置:

<Route path="/:id/list" component={List} />

页面的ID为this.props.match.params.id,然后对页面的某些内容进行API调用。

在应用程序中导航时,它很好并且可以正常运行。但是,如果当前网址是例如

https://example.com/123/list

,刷新页面后,页面加载失败。没有错误,没有内容。

我在.htaccess文件中使用了以下内容,该文件非常适合刷新非动态页面,但不能刷新动态页面

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

我该如何做些不同的事情,以便在刷新页面时也加载动态内容?

在本地主机上进行页面刷新时,它应能正常工作。

根据第一个答案的建议,我确实尝试过:

RewriteRule ^(.*)$ /index.html [NC,L,QSA]

但没有区别。

2 个答案:

答案 0 :(得分:0)

可能的问题是,您的apache服务器在收到/123/list的请求时不知道要为您的应用提供服务。基本上,您需要设置一个通配符规则来重定向要由您的索引页处理的所有未知请求(这将执行客户端路由)。

这是我发现的一个相关问题:Redirect all to index.php htaccess

答案 1 :(得分:0)

对于其他有相同问题的人,我改用HashRouter代替BrowserRouter,它按计划工作。这并不理想,因为我个人不喜欢URL中的哈希符号,但就目前而言,这是一个解决方案。

<HashRouter>
    <App />
</HashRouter>