使用React / Laravel应用刷新页面中断应用返回空白页面

Question

我有一个位于Laravel 5.4框架上的React应用程序。 我遇到的问题是，在使用诸如https://app.com/ {url} / {slug}之类的URL刷新页面时，该应用程序中断了。

这是我位于App.js中的路由器组件

<Router>
  <div className="App__container container-fluid">
    <Navigation />
      <Switch>
        <Route path="/films" component={FilmsContainer}/>
        <Route path="/films/:slugname" component={FilmPage}/>
      </Switch>
  </div>
</Router>

当显示FilmsContainer组件时，通过浏览器刷新页面可以正常工作，因为我将Laravel的路由配置为无论何时通过此代码命中任何Web路由，都将返回保存React应用程序的主布局。

Route::get('{slug}', function() {
    return view('main');
})->where('slug', '(?!api)([A-z\d-\/_.]+)?');

但是，点击此链接组件时会出现问题，

<NavLink className="btn btn-success" to={`/films/${slugName}`}>View Film</NavLink>

第一次单击时，反应路由器会使用正确的URL成功渲染组件，例如： https : //www.app.com/films/this-film-name 。

但是，当我刷新此URL上的页面时，react应用程序会中断，并在Javascript控制台中返回错误：

Uncaught SyntaxError: Unexpected token <                          app.js:1

当刷新与www.app.com/{route}/{slug}模式匹配的任何URL上的页面时，应用程序都会中断，并且不会呈现任何内容，我所看到的只是浏览器中的空白页面。

我尝试使用browserHistory并在Laravel Web路由文件中设置其他路由，例如：

Route::get('films/{slug}', function() {
    return view('main');
})->where('slug', '(?!api)([A-z\d-\/_.]+)?');

尝试匹配路线中的多余参数，并提供保存应用程序的主要html文件。

这些似乎都不起作用，我有些困惑，这是Laravel问题吗？ 我的反应路由器配置不正确吗？ 任何建议将不胜感激，谢谢！

Answer 1

在我看来，您可能正在从相对路径调用app.js。 像<script src="app.js"></script> ，因此在films目录中，它实际上是在调用https://www.app.com/films/app.js并获取404，但是Laravel从那里发送了HTML https://www.app.com/films/app.js网址，因此出现了Uncaught SyntaxError: Unexpected token <错误。

Answer 2

当React Router在页面之间更改浏览器URL时，这都是在客户端完成的。 您向服务器发出1个index.html （或index.php ）请求，其余由React Router处理。 单击按钮，更改URL，更改要显示的内容，全部在index.html 。

但是，刷新时，您正在向服务器发出此奇怪URL的新请求，它不知道如何处理-它只知道如何提供主index文件。 我对PHP不太熟悉，但是要解决此问题，您只需要告诉服务器退回到主文件即可。 这篇文章可能会指导您正确的方向。 当Laravel收到一个不知道如何处理的URL时，它应该回到您的index文件中，该文件将被提供，然后在浏览器中React Router将处理路由。