React router dom with Typescript using match-CodePudding

I am using React Router Dom version 5 with React v 17 and with TypeScript. I am trying to figure out how to use the match object. So far I have:

import { BrowserRouter, Route, Switch, match } from 'react-router-dom';


interface DetailsProps {
  match?: match<string> ;
}

const Routing: React.FunctionComponent<DetailsProps> = (props: DetailsProps) => {
   const match = props.match;

   // more routes here
   <Route path={`${match.url}`} render={() => <Component/>} />
}

I get there error: Object is possibly 'undefined'.

Any Idea's why? is the type wrong?

CodePudding user response：

You can import it:

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

CodePudding user response：

Your interface says that match is an optional param and can be undefined

interface DetailsProps {
  match?: match<string> ;
}

By removing ? mark you'll make it required:

interface DetailsProps {
  match: match<string> ;
}