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?
You can import it:
import { match } from 'react-router-dom';
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> ;
}