Module '"react-router-dom"' has no exported member 'match'

user_7676581 0
Viewed 125

Hi i'm currently upgrading react-router-dom from 5.2.0 to 6.3.0 for my react typescript application. while converting the application I'm getting this error Module '"react-router-dom"' has no exported member 'match'.

here you can find the below code.

import { match } from 'react-router-dom';

export interface ContentTypeIdParams {
  contentTypeId: string;
}

export interface ContentTypeBreadcrumbProps {
  match: match<ContentTypeIdParams>;
}

I'm facing this error in my interface.

my route path

<Route
        path={`${RoutesEnum.RELEVANCE_TESTING_VERSIONS_COMPARISON_TEST_CASE}*`}
        element={({ match: { params } }) => (
          <Redirect
            to={getUrlWithParams(
              RoutesEnum.RELEVANCE_TESTING_VERSIONS_COMPARISON,
              params
            )}
          />

I searched a lot about this error but couldn't find any answers or questions. if anyone knows about this kindly answer this.

react-router-dom react-router react-hooks reactjs
1 Answers

It seems you are just wanting to "sniff" the route's params object to pass to a path generating utility function. The Route component takes only a ReactNode, a.k.a. JSX on the single element prop. There are also no longer any route props, replaced by React hooks.

Create a component that accesses the route path params via the useParams hook and renders a declarative redirect.

I'm not sure what RoutesEnum.RELEVANCE_TESTING_VERSIONS_COMPARISON is so passing it in as a prop to Redirect. It's not something being mapped over then it might be something that is just imported and used, and in this case the paramArg isn't necessary.

Example:

import { Navigate, useParams } from 'react-router-dom';

const Redirect = ({ paramArg }) => {
  const params = useParams();

  return <Navigate to={getUrlWithParams(paramArg, params)} replace />;
};

export default Redirect;

...

import Redirect from '../path/to/Redirect';

...

<Route
  path={`${RoutesEnum.RELEVANCE_TESTING_VERSIONS_COMPARISON_TEST_CASE}*`}
  element={<Redirect paramArg={RoutesEnum.RELEVANCE_TESTING_VERSIONS_COMPARISON} />}
/>
user_86908570
Related