用Laravel在React中实现JavaScript SPA的解决方案

公认的答案是对为什么会发生这样的问题的最好解释。如前所述，您必须同时配置客户端和服务器端。

在你的blade模板中，包括JavaScript绑定文件，确保像这样使用URL外观:

<script src="{{ URL::to('js/user/spa.js') }}"></script>

在路由中，确保将此添加到刀片模板所在的主端点。例如,

Route::get('/setting-alerts', function () {
   return view('user.set-alerts');
});

以上是刀片模板的主要端点。现在再添加一条可选路线，

Route::get('/setting-alerts/{spa?}', function () {
  return view('user.set-alerts');
});

发生的问题是，首先加载刀片模板，然后加载React路由器。当你加载'/setting-alerts'时，它会加载HTML内容和JavaScript代码。

但是当你加载'/setting-alerts/about'时，它首先在服务器端加载。因为它在服务器端，所以这个位置上没有任何东西，并且它返回not found。当你有可选的路由器时，它加载同一个页面，React路由器也被加载，然后React加载器决定显示哪个组件。

我通过修改webpack.config.js文件解决了这个问题。

我的新配置如下:

之前

output: {
  path: path.join(__dirname, '/build/static/js'),
  filename: 'index.js'
},


devServer: {
  port: 3000
}

后

output: {
  path: path.join(__dirname, '/build/static/js'),
  filename: 'index.js',
  publicPath: '/'
},


devServer: {
  historyApiFallback: true,
  port: 3000
}

我们使用Express.js的404处理方法。

// Path to the static React build directory
const frontend = path.join(__dirname, 'react-app/build');

// Map the requests to the static React build directory
app.use('/', express.static(frontend));

// All the unknown requests are redirected to the React SPA
app.use(function (req, res, next) {
    res.sendFile(path.join(frontend, 'index.html'));
});

这招很管用。现场演示是我们的网站。

如果你正在使用Firebase，你所要做的就是确保你的Firebase中有一个重写属性。Json文件在你的应用程序的根(在托管部分)。

例如:

{
  "hosting": {
    "rewrites": [{
      "source":"**",
      "destination": "/index.html"
    }]
  }
}

有关此主题的进一步阅读:

配置重写 Firebase CLI:“配置为单页应用程序(重写所有url到/index.html)”

对于React Router V4用户:

如果您试图通过其他答案中提到的哈希历史技术来解决这个问题，请注意

<Router history={hashHistory} >

在V4中不能工作。请改用HashRouter:

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

参考:HashRouter

通过以下对nginx配置的简单更改，我能够克服硬刷新web应用程序中断和手动URL输入web应用程序中断。

React版本:17.0.2 Web服务器:nginx 操作系统:Ubuntu Server 20.04 (Focal Fossa)

之前

location / {
    try_files $uri $uri/ =404;
}

后

location / {
    try_files $uri /index.html;
}

也许还有其他的解决方法，但是这个方法对我来说非常快速和节省时间。