Laravel routes with multiple slugs won't work in React - php

Question

I have an application with a Laravel back-end/React.js front-end. I am using react router so to make that work I have any path pointing to the Controller which loads the view with the components in them. However when I add nested routes in the react side i.e. "blog/:blogId", it seems that it completely skips the tag in which components are loaded into and shows me content from the Laravel view instead.
I originally had:
`Route::get('/{slug?}', 'ProjectsController#index'`
I've tried:
`Route::any('{path}', function($path){
$projects = Project::all();
$posts = Post::all();
return view('welcome', compact('projects', 'posts'));
})->where('path', '.*');`
This won't work either:
`Route::get('/{slug?}/{id?}', 'ProjectsController#index'`
What I want is for both /blog and /blog/2 to go to ProjectsController#index which loads the view with the react tag.
The data in my index function in ProjectsController is:
`$projects = Project::all();
$posts = Post::all();
//return $projects;
return view('welcome', compact('projects', 'posts'));`
Has anyone come across this before? Thanks.
UPDATED:
The welcome view being returned by the controller index method:
The <div id="content"></div> is where my base component is being loaded into. So when navigating to route '/blog' I see my component, when navigating to '/blog/anything' I see Laravel's login and register links.
`#extends('layout')
#section('content')
#if (Route::has('login'))
<div class="top-right links">
#if (Auth::check())
Home
#else
Login
Register
#endif
</div>
#endif
<div id="content"></div>
#include('partials._scripts')
#endsection`
The component making use of the link:
`View here
<Route path="/blog/:blogId" component={Post} />`
My other routes in the base component:
`<Switch>
<Route exact path="/" render={(props)=> <Home text={text} mobileNavIsOpen={hamburgerOpen} backgroundImage={background}/>} />
<Route path="/projects" component={Projects} />
<Route path="/blog" component={Blog} />
<Route component={NotFound} />
</Switch>`
I've tried placing the /blog/:blogId route in the base app along with the others - still no difference.
UPDATE:
When removing the /blog/ route tag from react router and just keeping '/blog/:blogId, it has the same effect.
UPDATE/PARTLY SOLVED:
Adding (\\d+) to my react router path: path={/blog/:id(\\d+)} rightly took me to the nested component. It did also load the blade view content, however, so as a temporary fix I have taken out the blade content that was displayed. Would be good to see if anyone has another way around it. Thanks.

Answer 1

Try this
Route::get('/{any}', 'ProjectController#index')->where('any', '.*');
This is basically added to the end of the routes/web.php, since most probably you are trying to build a SPA and you want all http requests to be handled by react router.
Update:
Based on your updates I understand that you want both /blog and /blog/:ID to be handled by the same method. That can be done like this
Route::get('blog/{id?}', 'ProjectController#index')->where('id', '[0-9]+');
If you need the ID in the index method give it as the first argument to the method and send it to the view.