如何在 Laravel 8 中将 Laravel 路由与 React SPA 单路由一起使用

Question

我是 Laravel 中的 React 新手。我在 Laravel 8 中准备了仪表板，在 web.php 中有路线。现在我开始在 Laravel 中使用 React 前端。问题是在为前端放置 Route::view('/{path?}', "welcome"); 后我无法访问仪表板路由。指导我如何将两条路线分别保持在单一 web.php 中。

这是我的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

Answer 1

关于您的当前设置，您首先需要了解一些事情，如果您传递一个可选参数而不使用 where() 链接方法将从路由查询中获取所有内容，因此，在 laravel-router 可以之前解决任何预期的路线，react-router 将接受您的任何查询，并会尝试在 laravel-router.

之前解决它

防止这个问题的最好方法，你可以将可选路由移到文件末尾并添加一个链式 where(...) 方法让 laravel-router 知道哪一部分（如果没有，则全部) 的查询将由 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", ".*");

如何在 Laravel 8 中将 Laravel 路由与 React SPA 单路由一起使用

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

laravel

reactjs

laravel-8