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

Question

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!

Answer 1

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.