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

Question

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

Мне нужно использовать 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'));

18

javascript laravel php react-router reactjs

Решение

Другие решения

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

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

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

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

9

Если вы используете 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>
);
}
}

В роутере Ларавела …

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

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

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

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

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

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

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

4

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

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

2

Мне кажется это работает

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

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

0

Источник

Accepted Answer

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

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

25