React Router Nested routes not working with laravel 7

I'm making a website with laravel backend and react as a front-end library and using React-Router & I've this code

<Switch>
          <Route exact path="/" component={ProductsPage}/>
          <Route path="/category/:id" component={CategoryPage}/>
</Switch>

which I also tried switching to

<Switch>
          <Route exact path="/" component={ProductsPage}/>
          <Route path="/category">
              <Route path="/:id" component={CategoryPage} />
          </Route>

here's my web.php page

use Illuminate\Support\Facades\Route;
Route::view('/{path?}', 'app');

Everything works normally except nested routes if I visit /category/805 it gives me a 404

I've tried many solutions like adding exact to all routes but nothing work.

Joshuamlucas

5 years ago

Level 3

Hi Volver,

I ran into the same issue, where a link to the specific path worked but typing in the path did not. I couldn't find much help, but this is what I found to work. I'll link to the docs that helped me figure this out.

The first thing I checked was my routes file. Route:: get('/{path?} '... is a good start since this route will allow for optional parameters. This route will allow all characters as parameters, the only catch is that it does not allow /. So if you have nested routes it will not catch them resulting in a 404 status code. But the fix is to explicitly allow / by using a where condition regular expression which looks like this:

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

https://laravel.com/docs/7.x/routing#parameters-encoded-forward-slashes

Then you can start setting up your routes. Normally, I place nested routes within the component they belong to. So I would set it up like this.

app.js

	<Switch>
          	<Route exact path="/">
			<ProductsPage />
		</Route>

          	<Route path="/category">
              		<CategoryPage />
         	 </Route>
	</Switch>


CategoryPage.js // CategoryPage Component. 

	<Switch>
          	<Route exact path="/category">
			<CategoryPage />
		</Route>

          	<Route exact path="/category/:id">
              		<CategoryComponent />
         	 </Route>

	</Switch>

Linked are an example and a doc that helped me better understand nested routes. The example link below of nested routes might help with making your routes dynamic by using hooks, which might be the direction you want to go with your project. But hopefully what I described will get you started. :)

Example: https://reacttraining.com/react-router/web/example/nesting

Doc: https://reacttraining.com/react-router/web/guides/philosophy

I hope this helps, let me know if you find any other helpful things or have any clarifying questions. I'm growing in my knowledge of react-router and open to tips and best practices. :)

1 like