dongshuo2752
2017-07-18 04:00
浏览 132

使用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.

    点赞 评论
  • dongyinju5977 2017-07-18 04:15

    When React Router is changing the browser URL from page to page, that is all done on the client side. You make 1 request to the server for index.html (or index.php), and the rest is taken care of by React Router. Click the button, change the URL, change the content to display, all within index.html.

    When you refresh, however, you're making a new request to the server for this weird URL it doesn't know how to handle -- it only knows how to serve up your main index file. I'm not too familiar with PHP, but to fix this you just need to tell your server to fall back to your main file. This post might guide you in the right direction. When Laravel gets a URL it doesn't know how to handle, it should fall back to your index file, which will get served up and then in the browser React Router will handle the routing.

    点赞 评论

相关推荐 更多相似问题