Recently I started upgrading from react-router-dom v5 to v6 and I have something in my Route which I don't know what it is and what is the alternative in react-router-dom v6. The keyword match inside <LayoutReport match={props} /> is giving me warning:

(property) match: any
Type '{ match: any; }' is not assignable to type 'IntrinsicAttributes'.
Property 'match' does not exist on type 'IntrinsicAttributes'.ts(2322)

This is my Route

<Route
  path="reports/*"
  element={props => (
     <FilterBarProvider>
        <LayoutReport match={props} />
     </FilterBarProvider>)}
/>

Recently I started upgrading from react-router-dom v5 to v6 and I have something in my Route which I don't know what it is and what is the alternative in react-router-dom v6. The keyword match inside <LayoutReport match={props} /> is giving me warning:

(property) match: any
Type '{ match: any; }' is not assignable to type 'IntrinsicAttributes'.
Property 'match' does not exist on type 'IntrinsicAttributes'.ts(2322)

This is my Route

<Route
  path="reports/*"
  element={props => (
     <FilterBarProvider>
        <LayoutReport match={props} />
     </FilterBarProvider>)}
/>

• javascript
• reactjs
• react-router-dom

• What is the typescript declaration for this LayoutReport ponent? The error/warning is informing you it doesn't accept any match: any proptype. What are you really wanting to ask about here, a replacement for some "match" "thing" in react-router-dom@6, or the Typescript error/warning about some ponent's match prop? What are you really trying to acplish here? BTW, the Route ponent's element prop takes only a React.ReactNode value, not a function. – Drew Reese Commented Sep 15, 2022 at 17:26
• @DrewReese Hi, LayoutReport is not typescript it is .js. The LayoutReport ponent is imported into the Dashboard ponent inside Routes. And about the match in my old code base, it was used with RRDv5. Now, I don't have any idea what the use of match inside the LayoutReport ponent is. – Shriniwas Commented Sep 16, 2022 at 14:47
• What do you need from the old match object? What were you using it for? – Drew Reese Commented Sep 16, 2022 at 16:19
• @DrewReese what I see on console.log match is history, location, and match. I tried using hooks as you suggested in the LayoutReport ponent and it is working partially. I used useNavgiate, useLocation, and useMatch hooks. – Shriniwas Commented Sep 20, 2022 at 8:05
• There's no RRDv6 replacement for the old RRDv5 route props. What exactly where you accessing from the match object in the older code? – Drew Reese Commented Sep 20, 2022 at 8:08

2 Answers 2

It seems you are asking two questions, one about the Typescript error/warning, and the other is an implied "how to access route props in RRDv6" via the title. Answering the second rather resolves the first. In react-router-dom@6 there are no longer any route props. In fact, the element prop takes only a React.ReactNode, a.k.a. JSX, not any callback function that may or may not return JSX.

The route should look something like:

<Route
  path="reports/*"
  element={(
    <FilterBarProvider>
      <LayoutReport />
   </FilterBarProvider>
  )}
/>

This will remove the Typescript error/warning about the match prop that was passed.

But now how to access the old RRDv5 match object? This is easy, use React hooks to access what was previously provided on the match object. For example, if you are trying to access route path params, use the useParams hook to access the params object, i.e. what used to be match.params.

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

const LayoutReport = () => {  // <-- remove undefined `match` prop
  const params = useParams(); // <-- access params via hook

  ...
};

There are other hooks to access other route information, so it depends on what you need to access which hook you use.

• history object was replaced by a navigate function via the useNavigate hook
• location object via the useLocation hook
• match object was eliminated, you can access the params via the useParams hook.

Example:

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

const LayoutReport = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const params = useParams();

  ...
};

you can use the useParams hook. https://reactrouter./en/v6.3.0/api#useparams