How to use Laravel routes alongside with React SPA single route in Laravel 8-CodePudding

I am new to use React in Laravel. I have dashboard ready in Laravel 8 having routes in web.php. Now I am starting frontend on React inside Laravel. The problem is I cannot access Dashboard routes after putting Route::view('/{path?}', "welcome"); for frontend. Guide me how to keep both routes in single web.php that works respectively.

This is my web.php

Route::view('/{path?}', "welcome");

Auth::routes(['verify' => true]);
Route::get('/logout',function(){
    Session::flush();
    return redirect('/login');
});


Route::prefix('admin')->group(function () {

    Route::middleware(['is_admin'])->group(function () {
        Route::get('/home', [App\Http\Controllers\Admin\ProfileController::class, 'adminHome'])->name('admin.home');

        Route::get('/pending/users', [App\Http\Controllers\Admin\ProfileController::class, 'pendingUserProfiles'])->name('admin.pending.users');
        Route::get('/rejected/users', [App\Http\Controllers\Admin\ProfileController::class, 'rejectedUserProfiles'])->name('admin.rejected.users');
        Route::get('/users_list', [App\Http\Controllers\Admin\ProfileController::class, 'usersList'])->name('admin.users.list');
        Route::get('/pending/user/{id}', [App\Http\Controllers\Admin\ProfileController::class, 'pendingUserProfile'])->name('admin.pending.user');
        Route::get('/rejected/user/{id}', [App\Http\Controllers\Admin\ProfileController::class, 'rejectedUserProfile'])->name('admin.rejected.user');

        Route::post('/profile/approve', [App\Http\Controllers\Admin\ProfileController::class, 'approveProfile'])->name('admin.aprove.profile');
        Route::get('/profile/{id}', [App\Http\Controllers\Admin\ProfileController::class, 'profileView'])->name('admin.profile.view');
        Route::get('/profile/delete/{id}', [App\Http\Controllers\Admin\ProfileController::class, 'profileDelete'])->name('admin.profile.delete');

        Route::prefix('category')->group(function(){

            Route::get('/add', [App\Http\Controllers\Admin\CategoryController::class, 'createCategory'])->name('admin.category.add');
            Route::post('/add', [App\Http\Controllers\Admin\CategoryController::class, 'storeCategory'])->name('admin.category.store');
            Route::get('/list', [App\Http\Controllers\Admin\CategoryController::class, 'listCategory'])->name('admin.category.list');
            Route::get('/edit/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'editCategory'])->name('admin.category.edit');
            Route::post('/edit', [App\Http\Controllers\Admin\CategoryController::class, 'storeEditCategory'])->name('admin.category.edit.store');
            Route::get('/delete/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'deleteCategory'])->name('admin.category.delete');
            Route::get('/fields/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'showFields'])->name('admin.category.fields.list');
            Route::get('/field/delete/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'deleteField'])->name('admin.category.field.delete');
            Route::get('/field/options/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'showFieldOptions'])->name('admin.category.field.options.list');
            Route::get('/field/option/delete/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'deleteFieldOption'])->name('admin.category.field.option.delete');

        });


    });

});

Looking for any help. Thanks

CodePudding user response：

There are some things you need to know first about your current settings, if you pass an optional parameter without using a where() chained method will take everything from the route query, so, before laravel-router can resolve any of the expected routes, react-router will take any of your query and it will try to resolve it prior laravel-router.

The best way to prevent this issue, you can move the optional route to the end of the file and add a chained where(...) method to let laravel-router know which part (if not, all) of the query will be used by react-router.

Auth::routes(['verify' => true]);
Route::get('/logout',function(){
    Session::flush();
    return redirect('/login');
});


Route::prefix('admin')->group(function () {

    Route::middleware(['is_admin'])->group(function () {
        Route::get('/home', [App\Http\Controllers\Admin\ProfileController::class, 'adminHome'])->name('admin.home');

        Route::get('/pending/users', [App\Http\Controllers\Admin\ProfileController::class, 'pendingUserProfiles'])->name('admin.pending.users');
        Route::get('/rejected/users', [App\Http\Controllers\Admin\ProfileController::class, 'rejectedUserProfiles'])->name('admin.rejected.users');
        Route::get('/users_list', [App\Http\Controllers\Admin\ProfileController::class, 'usersList'])->name('admin.users.list');
        Route::get('/pending/user/{id}', [App\Http\Controllers\Admin\ProfileController::class, 'pendingUserProfile'])->name('admin.pending.user');
        Route::get('/rejected/user/{id}', [App\Http\Controllers\Admin\ProfileController::class, 'rejectedUserProfile'])->name('admin.rejected.user');

        Route::post('/profile/approve', [App\Http\Controllers\Admin\ProfileController::class, 'approveProfile'])->name('admin.aprove.profile');
        Route::get('/profile/{id}', [App\Http\Controllers\Admin\ProfileController::class, 'profileView'])->name('admin.profile.view');
        Route::get('/profile/delete/{id}', [App\Http\Controllers\Admin\ProfileController::class, 'profileDelete'])->name('admin.profile.delete');

        Route::prefix('category')->group(function(){

            Route::get('/add', [App\Http\Controllers\Admin\CategoryController::class, 'createCategory'])->name('admin.category.add');
            Route::post('/add', [App\Http\Controllers\Admin\CategoryController::class, 'storeCategory'])->name('admin.category.store');
            Route::get('/list', [App\Http\Controllers\Admin\CategoryController::class, 'listCategory'])->name('admin.category.list');
            Route::get('/edit/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'editCategory'])->name('admin.category.edit');
            Route::post('/edit', [App\Http\Controllers\Admin\CategoryController::class, 'storeEditCategory'])->name('admin.category.edit.store');
            Route::get('/delete/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'deleteCategory'])->name('admin.category.delete');
            Route::get('/fields/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'showFields'])->name('admin.category.fields.list');
            Route::get('/field/delete/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'deleteField'])->name('admin.category.field.delete');
            Route::get('/field/options/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'showFieldOptions'])->name('admin.category.field.options.list');
            Route::get('/field/option/delete/{id}', [App\Http\Controllers\Admin\CategoryController::class, 'deleteFieldOption'])->name('admin.category.field.option.delete');

        });
    });
});

// 1. Now the routes above can be registered and resolved before reaching this line below
// 2. Including the `.*` will allow laravel take very part of the route and pass it to the react-router
Route::view('/{path?}', "welcome")->where("path", ".*");