Dynamic route doesn't work in 4.0

routes.js

const routes = [
  { path: "/", exact: true, name: "Home" },
  { path: "/product/list", name: "ProductList", component: ProductList },
  { path: "/product/detail/:id", name: "ProductDetail", component: ProductDetail }
];

when I enter /product/detail/2, It throws Uncaught TypeError: Cannot read property ‘name’ of undefined.

AppGreadcrumb.js

const getRouteName = (pathname, routes) => {
    const currentRoute = routes.find((route) => route.path === pathname);
    return currentRoute.name;
  };

I guess that ‘/product/detail/:id’ is not same as '/product/detail/2, so currentRoute return undefined and getRouteName function throw error.

Thanks.

[nicolerenee]

I was able to fix this by changing the getRouteName to:

const getRouteName = (pathname, routes) => {
    const currentRoute = routes.find(
      (route) =>
        matchPath(pathname, {
          path: route.path,
          exact: route.exact,
          strict: route.strict,
        }) != null,
    )
    return currentRoute.name
  }

You will also need to add the following import:

import { matchPath } from 'react-router'

[Prasaa84]

Hi… how to make this in react 18. This code is not working on it. Browser console says ’ No routes matched location “/admin/sometexthere” ’