Laravel + React 路由与 react-router-dom答案

【问题标题】：Laravel + React routing with react-router-domLaravel + React 路由与 react-router-dom
【发布时间】：2019-05-30 07:10:11
【问题描述】：

我尝试在我的 laravel 应用程序上创建一个反应路由。但这不起作用。我已经遵循了几个教程但没有成功。

首先，我已将此路由添加到 route.php：

Route::get('/', function () {
return view('index', []); });

然后，在 index.blade.php 中：

    <div id="app"></div>
    <script src="{{asset('js/app.js')}}" ></script>

然后，在我的 app.js 中，我添加了路由：

  <BrowserRouter>
    <Switch>
     <Route path="currency" component={Currency}/>
     <Route path="/" component={Index}/>

    </Switch>  </BrowserRouter>

当我到达http://localhost/project/public 时，索引组件还可以，但是当我尝试加入http://localhost/project/currency 时，这不起作用。我尝试删除索引组件的路线，但货币相同。

你有什么想法吗？

非常感谢

【问题讨论】：

标签： reactjs laravel react-router-dom

【解决方案1】：

“项目”是应用程序的基本文件夹吗？

将 baseName 参数添加到 BrowserRouter

    <BrowserRouter basename='/project'>

您还需要更新 laravel 路由文件，如果它匹配模式 .../project/... 则始终转到应用索引路由所以 /project 和 /project/currency 都应该由 laravel 路由到应用程序的索引，并且应用程序从那里处理路由逻辑。我的 CakePHP 项目也必须这样做。

【讨论】：

感谢您的回答。我尝试添加基本名称，但这并没有改变任何东西。
你还需要更新 laravel 路由文件，如果它匹配模式 .../project/... 总是去应用索引路由所以 /project 和 /project/currency 都应该去索引哪个是应用程序，应用程序从那里处理路由逻辑。
好的。我刚刚尝试添加： Route::get('/currency', function () { return view('index', []); });但现在它总是显示的索引组件
参见“创建通配符路由”部分blog.pusher.com/react-laravel-application
我创建了这条路线：Route::get('/{path?}', [ 'uses' => 'ReactController@show', 'as' => 'react', 'where' => ['路径' => '.*'] ]);

【解决方案2】：

打开 Laravel 路由器以响应任何请求！

Route::get('{all?}', function(){
    return view('index');
})->where('all', '([A-z\d-\/_.]+)?');

【讨论】：

【解决方案3】：

来自 web.php 的路由将为 laravel 和 react 提供完美的路由，您可以从 laravel 执行任何路由来检索数据......包括

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

在网络路由的末尾，以便最终加载它以获得您的所有视图

【讨论】：