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

Ответы

Ответ 1

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

Route::get('/{path?}', [
    'uses' => '[email protected]',
    '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');

Ответ 2

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

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

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

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

Ответ 3

Если вы используете 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. Это связано с тем, что с точки зрения 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');
});

Ответ 5

Это похоже на меня.

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

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

Ответ 6

Route::get("/{route?}", function(){
 return view("index");
})->where('route', "(route1|route2|route3)");