Question

我的前端是React / Redux，带有PHP的后端API。我正在使用启用了historyApiFallback的Webpack：

devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true
  }

我正在使用redux-persist进行更新工作。我可以刷新页面，如果网址是：localhost:8000/summary或任何只有一个路径的网址，但如果网址有多个子路径，如下所示：localhost:8000/summary/customers，我得到的不能GET 404错误。

我的路线定义如下：

export default (
    <Route path="/" component={App}>
      <Route path ="summary" component={SummaryItems} />
        <Route path ="summary/customers" component={AllCustomersSummary} />     
        //more routes    
    </Route> 
);

我查看了其他答案，但建议的解决方案（启用historyApiFallback）在此特定情况下无效。

Answer 1

在您的路线中，您只需指定

即可

<Route path ="customers" component={AllCustomersSummary} />

不使用多个子路径，然后直接访问localhost:8000/customers

使用historyApiFallback时需要history={browserHistory}。

<强>更新

尝试使用Route处理程序来处理子路径

export default (
    <Route path="/" handler={App}>
      <Route path ="/summary" handler={SummaryItems} />
        <Route path ="/summary/customers" handler={AllCustomersSummary} />     
        //more routes    
    </Route> 
);

这应该有效

Answer 2

以下是我解决问题的方法：

1.在根目录中创建.htaccess文件并添加以下内容：

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

请注意，index.html是主页文件（包含您的反应应用的文件），对我来说是home.php。根据我的理解（请纠正我，如果我错了）以上解决了问题，因为当您刷新页面时，请求将通过服务器上不存在的URL发送到服务器，因此服务器发送回主页其中包含您的反应应用。

注意：此解决方案不适用于localhost。

如果url有多个子路径，则刷新页面时无法获得404错误

2 个答案: