如何将 React Router 与 Laravel 一起使用？

php javascript reactjs react-router laravel

2022-08-30 12:13:04

我需要与项目一起使用。React RouterLaravel

但是当我在上创建路由器并尝试访问时，指责路由不存在错误。React RouterLaravel

我如何使用来管理Laravel项目路线？React Router

render((
    <Router history={browserHistory}>
        <Route path="/" component={App}/>
        <Route path="/profile" component={Profile}/> // this route I trying access
    </Router>
), document.getElementById('root'));

答案 1

创建一个将所有内容映射到一个控制器的路由，如下所示：

Route::get('/{path?}', [
    'uses' => 'ReactController@show',
    'as' => 'react',
    'where' => ['path' => '.*']
]);

然后在控制器中，只需显示包含 react 根文档的 HTML 页面：

class ReactController extends Controller {
    public function show () {
        return view('react');
    }
}

然后像往常一样使用react路由器做所有事情。似乎对我来说效果很好。

Laravel 5.5 的更新如果您的控制器仅返回一个视图（如上面的示例所示），则可以在路由文件中将上述所有代码替换为以下内容：

Route::view('/{path?}', 'path.to.view')
     ->where('path', '.*')
     ->name('react');

答案 2

基于杰克·泰勒（Jake Taylor）的答案（顺便说一句，这是正确的）：它有一个小错误，缺少一个引号，只是最后一个。'/{path?}'

此外，如果您不需要使用控制器，只需重定向回视图，则可以按如下方式使用它：

Route::get( '/{path?}', function(){
    return view( 'view' );
} )->where('path', '.*');

注意：只需确保在路由文件（Web.php Laravel 5.4）中所有路由的末尾添加此路由，这样您拥有的每个现有有效路由都可能在到达最后一个路由之前被捕获。