Laravel + React routing with react-router-dom

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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

asked Jan 3 at 16:59

kassbonbek

add a comment |

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>

Do you have an idea ?

Thank's a lot

asked Jan 3 at 16:59

kassbonbek

add a comment |

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>

Do you have an idea ?

Thank's a lot

asked Jan 3 at 16:59

kassbonbek

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>

Do you have an idea ?

Thank's a lot

reactjs laravel react-router-dom

asked Jan 3 at 16:59

kassbonbek

asked Jan 3 at 16:59

kassbonbek

asked Jan 3 at 16:59

kassbonbek

asked Jan 3 at 16:59

kassbonbek

asked Jan 3 at 16:59

kassbonbek

add a comment |

1 Answer
1

active

oldest

votes

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 at 17:11

answered Jan 3 at 17:04

varoons

1,311168

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

– kassbonbek
Jan 3 at 17:10

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.

– varoons
Jan 3 at 17:11

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

– kassbonbek
Jan 3 at 17:15

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

– varoons
Jan 3 at 17:19

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

– kassbonbek
Jan 3 at 17:34

|
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54026628%2flaravel-react-routing-with-react-router-dom%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Is "project" the base folder for the app?

Add baseName param to the BrowserRouter

    <BrowserRouter basename='/project'>

edited Jan 3 at 17:11

answered Jan 3 at 17:04

varoons

1,311168

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

– kassbonbek
Jan 3 at 17:10

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.

– varoons
Jan 3 at 17:11

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

– kassbonbek
Jan 3 at 17:15

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

– varoons
Jan 3 at 17:19

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

– kassbonbek
Jan 3 at 17:34

|
show 1 more comment

Is "project" the base folder for the app?

Add baseName param to the BrowserRouter

    <BrowserRouter basename='/project'>

edited Jan 3 at 17:11

answered Jan 3 at 17:04

varoons

1,311168

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

– kassbonbek
Jan 3 at 17:10

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.

– varoons
Jan 3 at 17:11

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

– kassbonbek
Jan 3 at 17:15

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

– varoons
Jan 3 at 17:19

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

– kassbonbek
Jan 3 at 17:34

|
show 1 more comment

Is "project" the base folder for the app?

Add baseName param to the BrowserRouter

    <BrowserRouter basename='/project'>

edited Jan 3 at 17:11

answered Jan 3 at 17:04

varoons

1,311168

Is "project" the base folder for the app?

Add baseName param to the BrowserRouter

    <BrowserRouter basename='/project'>

edited Jan 3 at 17:11

answered Jan 3 at 17:04

varoons

1,311168

edited Jan 3 at 17:11

answered Jan 3 at 17:04

varoons

1,311168

answered Jan 3 at 17:04

varoons

1,311168

answered Jan 3 at 17:04

varoons

1,311168

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

– kassbonbek
Jan 3 at 17:10

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.

– varoons
Jan 3 at 17:11

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

– kassbonbek
Jan 3 at 17:15

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

– varoons
Jan 3 at 17:19

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

– kassbonbek
Jan 3 at 17:34

|
show 1 more comment

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

– kassbonbek
Jan 3 at 17:10

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.

– varoons
Jan 3 at 17:11

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

– kassbonbek
Jan 3 at 17:15

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

– varoons
Jan 3 at 17:19

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

– kassbonbek
Jan 3 at 17:34

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

– kassbonbek
Jan 3 at 17:10

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.

– varoons
Jan 3 at 17:11

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

– kassbonbek
Jan 3 at 17:15

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

– varoons
Jan 3 at 17:19

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

– kassbonbek
Jan 3 at 17:34

|
show 1 more comment

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu