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!