dongshuo2752 2017-07-18 04:00
浏览 133
已采纳

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

I have a react application that sits on the Laravel 5.4 framework. The problem I'm having is that on a page refresh with a URL such as https://app.com/{url}/{slug} breaks the application.

Here is my router component that sits in 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>

Refreshing the page through the browser when the FilmsContainer component is displayed works properly as I have the routes for Laravel configured to return the main layout that holds the React application whenever any web route is hit via this code here.

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

However, an issue comes when this Link component is hit,

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

On the first click, react router successfully renders the component with the correct url, for example: https://www.app.com/films/this-film-name.

However when I refresh the page on this url, the react application breaks, returning an error in the Javascript console:

Uncaught SyntaxError: Unexpected token <                          app.js:1

When refreshing the page on any url that matches the www.app.com/{route}/{slug} pattern, the app breaks and nothing is rendered, all I see is a blank white page in the browser.

I've tried using browserHistory and also setting other routes in Laravel web routes file, such as:

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

to try and match the extra params in the routes and serve the main html file that holds the application.

None of this seems to be working and I'm a little confused, is this a Laravel issue? Do I have react router configured incorrectly? Any advice would be greatly appreciated, thanks!

  • 写回答

2条回答 默认 最新

  • doudaiyao0934 2017-07-26 18:02
    关注

    It looks to me like you may be calling app.js from a relative path. Like <script src="app.js"></script> and so in the films directory it's actually calling https://www.app.com/films/app.js and getting a 404, but Laravel's sending HTML from that https://www.app.com/films/app.js URL, hence the Uncaught SyntaxError: Unexpected token < error.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面