我需要将React Router 与Laravel 项目一起使用。
但是当我在React Router上创建路由器并尝试访问时，Laravel指责路由不存在错误。
如何使用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'));
【问题讨论】：
标签： javascript php laravel reactjs react-router
创建一个将所有内容映射到一个控制器的路由，如下所示：
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');
【讨论】：
/somePath/{path?}，然后在您的 React 中：<BrowserRouter basename="somePath"> 这将使您能够在反应中动态路由路径，但也可以直接链接子路径.
{path?} 部分表示它将匹配任何 URL。如果你把它放在你的路由文件的底部，任何与先前定义的 URL 不匹配的东西都将在这个位置匹配。
/bar/url，它将首先由 Laravel 处理，然后是 React-router 并显示其各自的组件？
基于 Jake Taylor 的回答（顺便说一句，这是正确的）：它有一个小错误，在 '/{path?}' 之后缺少一个引号，只是最后一个。
另外，如果您不需要使用控制器而只是重定向回您的视图，您可以像这样使用它：
Route::get( '/{path?}', function(){
return view( 'view' );
} )->where('path', '.*');
注意： 只需确保在路由文件（Laravel 5.4 的 web.php ）中所有路由的末尾添加此路由，这样您拥有的每条现有有效路由都可能在到达最后一条之前被捕获。
【讨论】：
DevTools failed to parse SourceMap: http://laravelreact.test/js/bootstrap.js.map
这似乎对我有用
Route::get('{reactRoutes}', function () {
return view('welcome'); // your start view
})->where('reactRoutes', '^((?!api).)*$'); // except 'api' word
Route::get('api/whatever/1', function() {
return [
'one' => 'two',
'first' => 'second'
];
});
Route::get('api/something/2', function() {
return [
'hello' => 'good bye',
'dog' => 'cat'
];
});
【讨论】：
2022 年 2 月编辑：我在最新的 Laravel 是 V5 并且 react-router 是 V4 时发布了这个解决方案。现在可能有更好的解决方案，因为从那时起 Laravel 和 react-router 都发展了很多
================================================ ===
使用<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，您的客户端路由使用#（片段标识符）完成，Laravel 的路由（即服务器端路由）不会读取它
到达此页面后，URL 为/。
单击该链接将使 URL /#/profile 并出现该组件。
之后，如果您刷新页面，您将不会看到 Route not exist 错误。这是因为，从 Laravel 的角度来看，URL 仍然是 /。 （组件Profile 仍然存在。）
https://reacttraining.com/react-router/web/api/HashRouter
希望我的解释清楚。
【讨论】：
您可以返回您的索引页面，React 的 browserHistory 将处理其他任何事情。
Route::pattern('path', '[a-zA-Z0-9-/]+');
Route::any( '{path}', function( $page ){
return view('index');
});
【讨论】：