I bundled up one of my projects and it works fine. However when hitting refresh on a route /about, it displays The requested URL /about was not found on this server.. Howeve
Hey this is actually a pretty common thing.
What's happening is you need to get your apache server to ignore any nested paths and just send all requests /*
to root instead. That way your front-end javascript can pick up the route on the client-side and display the correct view.
This is sometimes referred to as "HTML5 Mode" in different webservers.
In apache the way you do this is add a rule like the following:
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html [L]
What this does is to tell Apache to serve any files that exist, but if they dont exist, just serve /index.html
rather than a 404 not found.
In case of laravel, you need to render the same view where all the routes are written for react file. Laravel route is written as:
Route::get('{url}', function () { return view('welcome'); })->where(['url' => '.*']);
welcome blade file is:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="root"></div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
<Route>
<Route name = "App" path="/" handler = {App}>
<Route name="About" path="/about" handler = {About}/>
<DefaultRoute name="Projects" handler = {Projects}/>
</Route>
so every time you refresh on your about route, it will show the welcome blade and its respective routes in app.js file