Wie benutze ich den React Router mit Laravel?

Erstellen Sie eine Route, die alles einem Controller zuordnet, wie folgt:

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

Zeigen Sie dann in Ihrem Controller nur die HTML-Seite an, die das reagierte Stammdokument enthält:

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

Dann mache alles wie gewohnt mit dem reakt Router. Scheint gut für mich zu funktionieren.

Update für Laravel 5.5 Wenn der Controller nur eine Ansicht zurückgibt (wie im obigen Beispiel), können Sie den obigen Code in der Routendatei mit diesem Code austauschen:

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

Basierend auf der Antwort von Jake Taylor (die übrigens richtig ist): Sie hat einen kleinen Fehler, fehlt nach '/{path?}' ein Anführungszeichen, nur das letzte.

Wenn Sie keinen Controller verwenden und nur zurück zu Ihrer Ansicht umleiten müssen, können Sie ihn wie folgt verwenden:

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

Hinweis: Vergewissern Sie sich, dass Sie diese Route am Ende aller Ihrer Routen in der Routes-Datei (web.php für Laravel 5.4) hinzufügen, damit möglicherweise bereits vorhandene gültige Routen abgerufen werden, bevor Sie diese erreichen Letzter.

Wenn Sie Version 4 verwenden, verwenden Sie <HashRouter>.

Z.B.

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

In Laravel's Router ...

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

Mit HashRouter erfolgt Ihr clientseitiges Routing mit # (Fragment Identifier), das von Laravel-Routing nicht gelesen wird (d. H. Serverseitiges Routing).

Beim Aufrufen dieser Seite lautet die URL /.

Wenn Sie auf den Link klicken, wird der URL /#/posts angezeigt, und die Komponente wird angezeigt.

Wenn Sie danach die Seite aktualisieren, wird der Fehler Route not exist nicht angezeigt. Dies liegt daran, dass die URL aus Laraves Sicht immer noch / ist. (Die Komponente Profile bleibt immer noch dort.)

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

Hoffe meine Erklärung ist klar.

Sie können Ihre Indexseite zurückgeben, und browserHistory of React erledigt alles andere.

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

Das scheint für mich zu funktionieren

Für alle Reaktionswege

Route::get('{reactRoutes}', function () {
    return view('welcome'); // your start view
})->where('reactRoutes', '^((?!api).)*$'); // except 'api' Word

Für Laravelstrecken

Route::get('api/whatever/1', function() {
    return [
        'one' => 'two',
        'first' => 'second'
    ];
});

Route::get('api/something/2', function() {
    return [
        'hello' => 'good bye',
        'dog' => 'cat'
    ];
});