Laravel + React routing with react-router-dom

Question

I try to create a react routing on my laravel application. But that doesn't work. I've followed several tutorials without any success.

First, I've add this route to route.php:

Route::get('/', function () {
return view('index', []); });

Then, in index.blade.php:

    <div id="app"></div>
    <script src="{{asset('js/app.js')}}" ></script>

Then, in my app.js, I've add the routes:

  <BrowserRouter>
    <Switch>
     <Route path="currency" component={Currency}/>
     <Route path="/" component={Index}/>

    </Switch>  </BrowserRouter>

When I reach http://localhost/project/public, the index component is OK but when I try to join http://localhost/project/currency, that doesn't work. I try to remove the route of index component but it's the same for currency.

Do you have an idea ?

Thank's a lot

varoons · Accepted Answer · 2019-01-03 17:11:47Z

2

Is "project" the base folder for the app?

Add baseName param to the BrowserRouter

    <BrowserRouter basename='/project'>

You also need to update the laravel route file to always go to the app index route if it matches the pattern .../project/... So /project and /project/currency both should be routed by laravel to index which is the app and the app handles the routing logic from there on. Had to do the same with my CakePHP project.

edited Jan 3, 2019 at 17:11

answered Jan 3, 2019 at 17:04

varoons

3,8871 gold badge18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kassbonbek Over a year ago

Thanks for you answer. I've tried to add the basename but that doesn't change anything.

varoons Over a year ago

You also need to update the laravel route file to always go to the app index route if it matches the pattern .../project/... So /project and /project/currency both should go to index which is the app and the app handles the routing logic from there on.

kassbonbek Over a year ago

Ok. I've just tried to add: Route::get('/currency', function () { return view('index', []); }); But now it's alway the index component whose displayed

varoons Over a year ago

See 'Creat Wildcard route' section blog.pusher.com/react-laravel-application

kassbonbek Over a year ago

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

|

Diego Diaz · Accepted Answer · 2019-10-16 22:51:26Z

0

Open the Laravel router for response any request!

Route::get('{all?}', function(){
    return view('index');
})->where('all', '([A-z\d-\/_.]+)?');

answered Oct 16, 2019 at 22:51

Diego Diaz

11 bronze badge

Comments

bpjuli · Accepted Answer · 2020-08-28 09:45:55Z

0

routing from web.php would give the perfect routing for laravel and react, you can do any routing from laravel to retrieve data.... include

Route::view('/{path?}', 'index');

at end of web routes so that it will be loaded at last getting your all views

answered Aug 28, 2020 at 9:45

bpjuli

112 bronze badges

Comments

Rok Benko · Accepted Answer · 2023-08-13 11:55:36Z

0

Add this in web.php in Route directory:

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

It will work perfectly.

edited Aug 13, 2023 at 11:55

Rok Benko

23.7k5 gold badges41 silver badges73 bronze badges

answered Aug 6, 2023 at 6:33

Plantinum warrior

12 bronze badges

Collectives™ on Stack Overflow

Laravel + React routing with react-router-dom

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related