用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加载器决定显示哪个组件。

当我在Electron中使用React作为前端，使用React -router-dom作为路由时，我就遇到了这个问题。

我用HashRouter替换了BrowserRouter，这是固定的。

这里有一个简单的例子:

import {
  HashRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

将此添加到webpack.config.js:

devServer: {
    historyApiFallback: true
}

我喜欢这种处理方式。尝试添加: yourSPAPageRoute/*在服务器端消除这个问题。

我采用了这种方法，因为即使是原生HTML5 History API也不支持页面刷新时的正确重定向(据我所知)。

注意:选定的答案已经解决了这个问题，但我试图更具体。

表达的路线

使用useEffect读取URL并应用您想要的更改。

例如，一个页面有一个按钮，打开一个滑块。单击按钮时，将向URL中添加滑块的查询参数，并打开滑块。

问题-在刷新页面时打开滑块，加载的页面不显示打开的滑块，即使查询参数存在。

解决方案:添加一个useEffect，读取“slider”查询参数，并运行按钮处理程序。为滑块查询参数添加一个状态变量，并将其包含在useEffect的依赖数组中。

你不需要担心后端请求，假设在滑块组件中有一个。

路由器可以用两种不同的方式调用，这取决于导航是发生在客户端还是服务器上。您已经将其配置为客户端操作。关键参数是run方法的第二个参数，即location。

当你使用React Router Link组件时，它会阻塞浏览器导航并调用transitionTo来做客户端导航。您正在使用HistoryLocation，因此它使用HTML5历史API通过在地址栏中模拟新URL来完成导航的错觉。如果您使用的是较旧的浏览器，这将不起作用。您将需要使用HashLocation组件。

When you hit refresh, you bypass all of the React and React Router code. The server gets the request for /joblist and it must return something. On the server you need to pass the path that was requested to the run method in order for it to render the correct view. You can use the same route map, but you'll probably need a different call to Router.run. As Charles points out, you can use URL rewriting to handle this. Another option is to use a Node.js server to handle all requests and pass the path value as the location argument.

例如，在Express.js中，它看起来是这样的:

var app = express();

app.get('*', function (req, res) { // This wildcard method handles all requests

    Router.run(routes, req.path, function (Handler, state) {
        var element = React.createElement(Handler);
        var html = React.renderToString(element);
        res.render('main', { content: html });
    });
});

请注意，正在传递请求路径以运行。为此，需要有一个服务器端视图引擎，可以将呈现的HTML传递给该引擎。在使用renderToString和在服务器上运行React时，还有许多其他注意事项。一旦页面在服务器上呈现，当你的应用程序在客户端加载时，它将再次呈现，并根据需要更新服务器端呈现的HTML。