Retrieving state from React Router v6 Navigate

Question

I'm trying to pass state data after navigating to a new route and typescript is telling me

Property 'email' does not exist on type 'State'."

Parent functional component:

navigate('/check-mail', { state: { email: "hello, I'm an email" } });

Child functional Component:

const SentPasswordResetInstructions = () => {
    const location = useLocation();
    let { email } = location.state;
}

I've tried creating an interface like so: interface propState { email : string }

and then using

useLocation<propState>();

However that throws additional errors. How do I fix this ??

Answer 1

Just solved it! Creating the interface:

interface propState {
    email: string;
} 

And then using

let { email } = location.state as propState;

Worked!