web-dev-qa-db-fra.com

Comment utiliser React Router avec Laravel?

J'ai besoin d'utiliser React Router avec un projet Laravel.

Mais lorsque je crée un routeur sur le React Router et que j'essaie d'accéder, Laravel accuse Route pas d'erreur.

Comment puis-je utiliser React Router pour gérer les itinéraires de projets 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
18
Lai32290

Créez un itinéraire qui mappe tout à un contrôleur, comme suit:

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

Ensuite, dans votre contrôleur, affichez simplement la page HTML contenant le document racine de réaction:

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

Ensuite, faites tout comme d'habitude avec le routeur de réaction. Semble bien fonctionner pour moi.

Mise à jour pour Laravel 5.5 Si votre contrôleur renvoie uniquement une vue (comme dans l'exemple ci-dessus), vous pouvez échanger tout le code ci-dessus avec ceci dans votre fichier de routes:

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

Basé sur la réponse de Jake Taylor (ce qui est exact, d'ailleurs): il y a une petite erreur, il manque un guillemet après '/{path?}', juste le dernier.

De plus, si vous n'avez pas besoin d'utiliser un contrôleur et de simplement rediriger votre vue, vous pouvez l'utiliser comme ceci:

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

Remarque: Assurez-vous simplement d’ajouter cette route à la fin de toutes vos routes dans le fichier routes (web.php pour Laravel 5.4), afin que toutes les routes valides existantes puissent être capturées le dernier.

10
MiKE Zamora

Si vous utilisez v4, que diriez-vous d'utiliser <HashRouter>?

Par exemple.

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

Dans le routeur de Laravel ...

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

Avec HashRouter, votre routage côté client est effectué avec # (identificateur de fragment), qui n'est pas lu par le routage de Laravel (c'est-à-dire le routage côté serveur)

En arrivant sur cette page, l'URL est /.

En cliquant sur le lien, l'URL /#/posts apparaîtra et le composant apparaîtra.

Après cela, si vous actualisez la page, vous ne verrez plus l'erreur Route not exist. En effet, du point de vue de Laravel, l’URL est toujours /. (Le composant Profile reste toujours là.)

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

J'espère que mon explication est claire.

4
Hiroki

Vous pouvez retourner votre page d'index et browserHistory of React gérera tout le reste.

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

Cela semble fonctionner pour moi

Pour tous les itinéraires de réaction

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

Pour les itinéraires 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
Andrey Kudriavtsev