Dynamic routing in React Router

React
1

In this code : import {
RouterProvider,
createBrowserRouter,
createRoutesFromElements,
Route
} from “react-router-dom”
import “./App.css”
import Layout from “./layout/Layout”
import Home from “./pages/Home”
import Products from “./pages/Products”
import ProductDetails from “./pages/ProductDetails”
import Blog from “./pages/Blog”
import Contacts from “./pages/Contacts”
import NotFound from “./pages/NotFound”
import About from “./pages/About”

let details = navigator.userAgent;
let regexp = /android|iphone|kindle/i;
let isMobileDevice = regexp.test(details);
let device

if (isMobileDevice) {
        device = "phone" ;
     } else {
        device = "desktop" ;
     }

const router = createBrowserRouter(createRoutesFromElements(
<Route
path=“/”
element= {}
errorElement= {}
>

  <Route
    index
    element={<Home device = {device}/>}
  />

  <Route
    path="products"
    element={<Products device={device} />}
  />
  
  <Route path="/product/:id" element={<ProductDetails />} />

  <Route
    path="about"
    element={<About device = {device}/>}
  />
  
 <Route
   path="blog"
   element={<Blog device = {device}/>}
/>

<Route
    path="contacts"
    element={<Contacts device = {device}/>}
/>

</Route>

))

export default function App() {
  return (
    <>
      <RouterProvider router={router}/>
    </>
  )
}

There is this route : <Route path=“/product/:id” element={} /> but when the path is something like /product/prdct3 the ProductDetail doesn’t render even though the directories are mentioned correctly and everything works fine.

2

Hey @himnishbhansali, do you have a scrim for this that we can check and run the code too? Can help us troubleshoot what’s going on here.