php - reactJS , accessing URL with daynamic segments says 'page not found'

The issue is pretty obvious. I have declared a route with 2 dynamic parts in my react.js app with the following line :

<Route  path='/products/:cat_id/:subcat_id' component={ProductsWise} />

But when I try to access the url: http://127.0.0.1:8000/products/4/1 , it simply says : 404 Not Found. The code follows :

import React, { Component } from 'react'
  import ReactDOM from 'react-dom'
  import { BrowserRouter, Route, Switch } from 'react-router-dom'
  import ProductsWise from './ProductsWise'
  
  class App extends Component {
    render () {
      return (
        <BrowserRouter>
          <div>
            <Header />
            <Switch>

              <Route  path='/products/:cat_id/:subcat_id' component={ProductsWise} />
              

            </Switch>
          </div>
        </BrowserRouter>
      )
    }
  }
  
  ReactDOM.render(<App />, document.getElementById('app'))

I am not putting the content inside ProductsWise.js here as I think that is not necessary to solve the problem.

How to get rid of the problem ?

P.S: I am actually building an app with PHP Laravel framework in server side and react.js in client side.

Answer

Solution:

The problem is that the SPA is not rendered for the products/4/1 path from the backend perspective.

I believe Route::view('/{path?}', 'app') is not relevant.

As far as there is no information about wildcard routing in the official Laravel routing documentation - you can render your SPA for / and for /products/{catId}/{subcatId} paths separately:

Route::view('/', 'app');
Route::view('/products/{catId}/{subcatId}', 'app');

Source