Как использовать React Router с Laravel?

Мне нужно использовать React Router с проектом Laravel .

Но когда я создаю маршрутизатор на React Router и пытаюсь получить доступ, Laravel обвиняет Route в отсутствии ошибки.

Как я могу использовать 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'));

Создайте маршрут, который отображает все на один контроллер, например:

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

Затем в вашем контроллере просто покажите HTML-страницу, содержащую отредактированный корневой документ:

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

Затем выполняйте все как обычно с помощью маршрутизатора. Кажется, хорошо работает для меня.

Обновление для Laravel 5.5 Если вы являетесь контроллером, возвращаете только представление (как в примере выше), вы можете поменять весь приведенный выше код с этим в файле маршрутов:

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

На основании ответа Джейка Тейлора (кстати, это правильно): он имеет небольшую ошибку, отсутствует кавычка после '/{path?}' , Только последняя.

Кроме того, если вам не нужно использовать контроллер и просто перенаправить обратно на свой вид, вы можете использовать его следующим образом:

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

Примечание. Обязательно добавьте этот маршрут в конце всех ваших маршрутов в файле маршрутов (web.php для Laravel 5.4), поэтому каждый существующий действующий маршрут может быть уловлен до достижения последнего.

Вы можете вернуть свою индексную страницу, и browserHistory of React будет обрабатывать все остальное.

 Route::pattern('path', '[a-zA-Z0-9-/]+'); Route::any( '{path}', function( $page ){ return view('index'); });

Мне кажется, это работает для меня

Для любых реагирующих маршрутов

 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' ]; });

Если вы используете v4, как насчет использования <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> <div> <div> <ul> <li><Link to="/profile" replace>Profile</Link></li> </ul> </div> <div> <Route path="/profile" component={Profile}/> </div> </div> </HashRouter> ); } }

В маршрутизаторе Laravel …

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

С HashRouter ваша маршрутизация на стороне клиента выполняется с помощью # (Идентификатор фрагмента), который не считывается маршрутизацией Laravel (например, маршрутизация на стороне сервера)

По прибытии на эту страницу URL / .

При нажатии на ссылку появятся URL /#/posts и компонент.

После этого, если вы обновите страницу, вы не увидите «Ошибка Route not exist . Это связано с тем, что, с точки зрения Ларавеля, URL-адрес все еще / . ( Profile компонента все еще остается там.)

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

Надеюсь, мои объяснения понятны.