如何在Laravel中使用React Router？

Question

我需要使用React Router一个Laravel项目.

但是当我创建路由器React Router并尝试访问时,Laravel指责Route not exists错误.

如何使用React Router经理Laravel项目路线？

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

Answer 1

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

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

然后在您的控制器中,只显示包含react根文档的HTML页面:

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

然后用反应路由器正常做一切.似乎对我有用.

Laravel 5.5的更新 如果您的控制器只返回一个视图(如上例所示),您可以在路径文件中将所有上述代码替换掉:

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

Answer 2

基于杰克泰勒的回答(顺便说一句,这是正确的):它有一点错误,后面缺少一个引号'/{path?}',只是最后一个.

此外,如果您不需要使用Controller并只需重定向回您的视图,您可以像这样使用它:

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

注意: 只需确保在路由文件中的所有路由的末尾添加此路由(Laravel 5.4的web.php),因此在到达最后一个之前,可能会捕获到的每个现有有效路由.

Answer 3

这似乎对我有用

对于任何反应路线

Route::get('{reactRoutes}', function () {
    return view('welcome'); // your start view
})->where('reactRoutes', '^((?!api).)*$'); // except 'api' word

对于 Laravel 路线

Route::get('api/whatever/1', function() {
    return [
        'one' => 'two',
        'first' => 'second'
    ];
});

Route::get('api/something/2', function() {
    return [
        'hello' => 'good bye',
        'dog' => 'cat'
    ];
});

Answer 4

怎么用<HashRouter>？

例如

import React from 'react';
import {
    HashRouter,
    Route,
    Link
}from 'react-router-dom';
import Profile from './Profile';

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <HashRouter>
                <Link to="/profile" replace>Profile</Link>
                <Route path="/profile" component={Profile}/>
            </HashRouter>
        );
    }
}

在 Laravel 的路由器中...

Route::get('/', function(){
    return view('index'); //This view is supposed to have the react app above
});

使用HashRouter，您的客户端路由是使用#(Fragment Identifier) 完成的，它不会被 Laravel 的路由读取（即服务器端路由）

到达此页面后，URL 为/。

单击该链接将使 URL/#/profile和组件出现。

之后，如果您刷新页面，您将不会看到Route not exist错误。这是因为，从 Laravel 的角度来看，URL 仍然是/. （组件Profile仍然保留在那里。）

https://reacttraining.com/react-router/web/api/HashRouter

希望我的解释清楚。