React-router urls don't work when refreshing or writing manually

Question

I\'m using React-router and it works fine while I\'m clicking on link buttons, but when I refresh my webpage it does not load what I want.

For instance, I am in

Answer 1

In case, anyone is here looking for solution on React JS SPA with Laravel. The accepted answer is the best explanation of why such problems happen. As already explained you have to configure both client side and server side. In your blade template, include the js bundled file, make sure to use URL facade like this

In your routes, make sure add this to the main endpoint where the blade template is. For example,

Route::get('/setting-alerts', function () {
   return view('user.set-alerts');
});

The above is the main endpoint for the blade template. Now add an optional route too,

Route::get('/setting-alerts/{spa?}', function () {
  return view('user.set-alerts');
});

The problem that happens is that first the blade template is loaded, then the react router. So, when you're loading '/setting-alerts', it loads the html and the js. But when you load '/setting-alerts/about', it first loads on the server side. Since on the server side, there is nothing on this location, it returns not found. When you have that optional router, it loads that same page and react router is also loaded, then react loader decides which component to show. Hope this helps.