error with url path with laravel and react-router

Question

I am facing a path issue with react router and laravel. I want to go to this path: /users/create . Its renders fine with react router but when i am in this path and i refresh the page i get a 404 and redirected due to middleware. Why is this happening?

** Note: When i use everywhere users-create instead users/create it works but its not what i want.

Code:

AppRouter.js

 <Router history={history}>
                <div className="wrapper">
                    <Sidebar/>
                    <div className="main-panel">
                        <Navbar/>
                        <Switch>
                            <Route exact path='/dashboard' component={Dashboard} />
                            <Route exact path='/categories' component={Category} />
                            <Route exact path='/users/create' component={UserCreate} />
                            <Route exact path='/users' component={User} />
                            <Route component={NotFound}/>
                        </Switch>
                        <Footer/>
                    </div>
                </div>
            </Router>

Routes.php

Route::view('/dashboard', 'main')->middleware('auth', 'preventHistory');
Route::view('/categories', 'main')->middleware('auth', 'preventHistory');
Route::view('/users/create', 'main')->middleware('auth', 'preventHistory');
Route::view('/users', 'main')->middleware('auth', 'preventHistory');

Sidebar.js

                                    <li className="nav-item ">
                                        <NavLink exact to='/users' activeClassName='active'>
                                            <span className="sidebar-normal">y</span>
                                        </NavLink>
                                    </li>
                                    <li className="nav-item ">
                                        <NavLink exact to='/users/create' activeClassName='active'>
                                            <span className="sidebar-normal">x</span>
                                        </NavLink>
                                    </li>

Saptarshi Basu · Accepted Answer · 2018-11-29 17:19:40Z

0

When you hit refresh, the url path directly goes to Laravel which is not aware of this path at all. This path is only known to React.

To fix this issue, all you need to do is, tell Laravel that /users/create is a React path and therefore on encountering such path Laravel needs to forward the request to index.html.

This is a common problem in all frameworks. Since I'm not a PHP person, I can't give you a code sample.

However, you may consider referring to this answer, which is for Spring, Java and Angular: https://stackoverflow.com/a/47926065/1235935

answered Nov 29, 2018 at 17:19

Saptarshi Basu

9,3694 gold badges42 silver badges64 bronze badges

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

1 Comment

billyVal Over a year ago

I believe that's not this issue because with all other routes, refresh works. It serves the specific view. Only with this specific route it creates the issue.

billyVal · Accepted Answer · 2018-11-29 18:10:13Z

0

I figured out the issue luckily. When i hit refresh or when i log in, i make a http request through axios on this endpoint e.g axios('api/auth/check') . The issue was that, axios every time was catching the url and hit the relative path (api/..), so it was hitting the wrong endpoint. I fixed it with a single / in the beginning of every axios request.

answered Nov 29, 2018 at 18:10

billyVal

338 bronze badges

Collectives™ on Stack Overflow

error with url path with laravel and react-router

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related