web-dev-qa-db-ja.com

React Laravelでルーターを使用するには？

LaravelプロジェクトでReact Routerを使用する必要があります。

しかし、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'));
javascriptphplaravelreactjsreact-router
22
Lai32290

次のように、すべてを1つのコントローラーにマップするルートを作成します。

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');
31
Jake Taylor

ジェイク・テイラーの回答に基づいています（ちなみに正しいです）：少し間違いがありますが、最後の'/{path?}'の後に引用符がありません。

また、コントローラーを使用する必要がなく、ビューにリダイレクトするだけの場合は、次のように使用できます。

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

注：このルートを必ずルートファイルのすべてのルートの最後に追加してください（web.php for Laravel 5.4）。あなたが持っているルートは、この最後のルートに到達する前にキャッチされることがあります。

12
MiKE Zamora

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
Hiroki

インデックスページを返すことができ、ReactのbrowserHistoryは他のものを処理します。

Route::pattern('path', '[a-zA-Z0-9-/]+');
Route::any( '{path}', function( $page ){   
     return view('index');
});
2
Đoàn Hữu Dụng

これは私のために働くようです

反応ルートの場合

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