Question

我有一个位于Laravel 5.4框架上的react应用程序。我遇到的问题是，使用https://app.com/ {url} / {slug}等网址刷新页面会破坏应用程序。

这是我的路由器组件，位于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>

在第一次单击时，react路由器成功地使用正确的URL呈现组件，例如：https://www.app.com/films/this-film-name。

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

Uncaught SyntaxError: Unexpected token <                          app.js:1

在任何与www.app.com/{route}/{slug匹配的网址刷新页面时模式，应用程序中断，没有任何呈现，我看到的只是浏览器中的空白页。

我尝试过使用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>一样，在电影目录中，它实际上正在调用https://www.app.com/films/app.js并获得404，但是Laravel从该https://www.app.com/films/app.js网址发送HTML，因此{{ 1}}错误。

Answer 2

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

然而，当你刷新时，你正在向服务器发出一个新的请求，因为它不知道如何处理这个奇怪的URL - 它只知道如何提供你的主index文件。我不太熟悉PHP，但为了解决这个问题，你只需要告诉你的服务器回退到你的主文件。 This post可能会指导您朝着正确的方向前进。当Laravel获取一个不知道如何处理的URL时，它应该回退到index文件，该文件将被提供，然后在浏览器中，React Router将处理路由。

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

2 个答案: