具有多个 slug 的 Laravel 路由在 React 中不起作用

Question

我有一个带有 Laravel 后端/React.js 前端的应用程序。我正在使用反应路由器，以便完成这项工作，我有任何指向控制器的路径，该控制器将视图与其中的组件一起加载。但是，当我在反应端添加嵌套路由时，即“blog/:blogId”，它似乎完全跳过了加载组件的标签，而是向我显示 Laravel 视图中的内容。

我原来有：

`Route::get('/{slug?}', 'ProjectsController@index'`

我试过了：

`Route::any('{path}', function($path){
    $projects = Project::all();
    $posts = Post::all();
    return view('welcome', compact('projects', 'posts'));
})->where('path', '.*');`

这也不行：

`Route::get('/{slug?}/{id?}', 'ProjectsController@index'`

我想要的是 /blog 和 /blog/2 都转到 ProjectsController@index 以加载带有反应标记的视图。

我在ProjectsController中的索引函数中的数据是：

  `$projects = Project::all();
    $posts = Post::all();

    //return $projects;
    return view('welcome', compact('projects', 'posts'));`

以前有人遇到过这种情况吗？谢谢。

更新：

控制器索引方法返回的欢迎视图：

<div id="content"></div> 是我的基本组件正在加载的位置。因此，当导航到路由“/blog”时，我会看到我的组件，当导航到“/blog/anything”时，我会看到 Laravel 的登录和注册链接。

`@extends('layout')

@section('content')

    @if (Route::has('login'))
        <div class="top-right links">
            @if (Auth::check())
                <a href="{{ url('/home') }}">Home</a>
            @else
                <a href="{{ url('/login') }}">Login</a>
                <a href="{{ url('/register') }}">Register</a>
            @endif
        </div>
    @endif

<div id="content"></div>

@include('partials._scripts')

@endsection`

使用链接的组件：

`<a href={`/blog/${item.id}`} target="_blank">View here</a>

                    <Route path="/blog/:blogId" component={Post} />`

我在基础组件中的其他路由：

`<Switch>
<Route exact path="/" render={(props)=> <Home text={text} mobileNavIsOpen={hamburgerOpen} backgroundImage={background}/>} />
<Route path="/projects" component={Projects} />
<Route path="/blog" component={Blog} />
<Route component={NotFound} />
</Switch>`

我已尝试将 /blog/:blogId 路由与其他路由一起放在基础应用程序中 - 仍然没有区别。

更新：

当从 react router 中删除 /blog/ 路由标签并只保留 '/blog/:blogId 时，它具有相同的效果。

更新/部分解决：

将(\\d+) 添加到我的反应路由器路径：path={/blog/:id(\\d+)} 正确地将我带到了嵌套组件。但是，它确实也加载了刀片视图内容，因此作为临时修复，我取出了显示的刀片内容。很高兴看看是否有人有其他方法。谢谢。

Answer 1

试试这个

Route::get('/{any}', 'ProjectController@index')->where('any', '.*');

这基本上是添加到 routes/web.php 的末尾，因为很可能您正在尝试构建一个 SPA，并且您希望所有 http 请求都由 react 路由器处理。

更新： 根据您的更新，我了解到您希望 /blog 和 /blog/:ID 都以相同的方法处理。可以这样完成

Route::get('blog/{id?}', 'ProjectController@index')->where('id', '[0-9]+');

如果您需要索引方法中的 ID，请将其作为该方法的第一个参数并将其发送到视图。