CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Shriniwas
Shriniwas

Reputation: 754

What is the alternative for match in react router dom v6?

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>)}
/>

Upvotes: 5

Views: 4583

Answers (2)

Drew Reese
Drew Reese

Reputation: 202781

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();

  ...
};

Upvotes: 4

Rohit Chhabra
Rohit Chhabra

Reputation: 21

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

Upvotes: 0

Related Questions