如何在 Laravel 中使用 React Router？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40719951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use React Router with Laravel?
提问by Lai32290
I needing use React Routerwith a Laravelproject.
我需要React Router与一个Laravel项目一起使用。
But when I create router on the React Routerand try access, Laravelaccuse Route not exist error.
但是当我在上面创建路由器React Router并尝试访问时，Laravel指责路由不存在错误。
How to can I use React Routerto manager Laravel project routes?
如何使用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'));
回答by Jake Taylor
Create a route that maps everything to one controller, like so:
创建一个将所有内容映射到一个控制器的路由，如下所示：
Route::get('/{path?}', [
'uses' => 'ReactController@show',
'as' => 'react',
'where' => ['path' => '.*']
]);
Then in your controller, just show the HTML page that contains the react root document:
然后在您的控制器中，只显示包含 react 根文档的 HTML 页面：
class ReactController extends Controller {
public function show () {
return view('react');
}
}
Then do everything as normal with react router. Seems to work well for me.
然后用反应路由器做一切正常的事情。似乎对我来说效果很好。
Update for Laravel 5.5If your controller only returns a view (like in the example above), you can replace all of the above code with this in your routes file:
Laravel 5.5 更新如果您的控制器只返回一个视图（如上例所示），您可以在路由文件中将上述所有代码替换为：
Route::view('/{path?}', 'path.to.view')
->where('path', '.*')
->name('react');
回答by MiKE Zamora
Based on Jake Taylor answer (which is correct, by the way) : it has a little mistake, is missing a quotation mark after '/{path?}', just the last one.
基于Hyman泰勒的回答（顺便说一句，这是正确的）：它有一个小错误，在 之后缺少一个引号'/{path?}'，只是最后一个。
Also, if you don't need to use a Controller and just redirect back to your view, you can use it like this:
此外，如果您不需要使用控制器而只需重定向回您的视图，您可以像这样使用它：
Route::get( '/{path?}', function(){
return view( 'view' );
} )->where('path', '.*');
Note:Just make sure to add this Route at the end of all of your routes in the routes file ( web.php for Laravel 5.4 ), so every existing valid route you have may be catched before reaching this last one.
注意：只需确保在路由文件（Laravel 5.4 的 web.php ）中所有路由的末尾添加此路由，因此在到达最后一个之前，您可能会捕获所有现有的有效路由。
回答by Andrey Kudriavtsev
This seems works for me
这似乎对我有用
For any react routes
对于任何反应路线
Route::get('{reactRoutes}', function () {
return view('welcome'); // your start view
})->where('reactRoutes', '^((?!api).)*$'); // except 'api' word
For laravel routes
对于 Laravel 路线
Route::get('api/whatever/1', function() {
return [
'one' => 'two',
'first' => 'second'
];
});
Route::get('api/something/2', function() {
return [
'hello' => 'good bye',
'dog' => 'cat'
];
});
回答by Hiroki
How about using <HashRouter>?
怎么用<HashRouter>？
E.g.
例如
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>
);
}
}
In Laravel's router...
在 Laravel 的路由器中...
Route::get('/', function(){
return view('index'); //This view is supposed to have the react app above
});
With HashRouter, your client side routing is done with #(Fragment Identifier), which is not read by Laravel's routing (i.e. server side routing)
使用HashRouter，您的客户端路由是使用#(Fragment Identifier) 完成的，它不会被 Laravel 的路由读取（即服务器端路由）
Upon arriving this page, the URL is /.
到达此页面后，URL 为/。
Clicking the link will make the URL /#/profileand the component will appear.
单击该链接将使 URL/#/profile和组件出现。
After that, if you refresh the page, you wont' see the Route not existerror. This is because, from Laravel's perspective, the URL is still /. (The component Profilestill remains there.)
之后，如果您刷新页面，您将不会看到Route not exist错误。这是因为，从 Laravel 的角度来看，URL 仍然是/. （组件Profile仍然保留在那里。）
https://reacttraining.com/react-router/web/api/HashRouter
https://reacttraining.com/react-router/web/api/HashRouter
Hope my explanation is clear.
希望我的解释清楚。
回答by ?oàn H?u D?ng
You can return your index page and browserHistory of React will handle anything else.
你可以返回你的索引页面，React 的 browserHistory 将处理其他任何事情。
Route::pattern('path', '[a-zA-Z0-9-/]+');
Route::any( '{path}', function( $page ){
return view('index');
});
