I am trying to send the variable id to another page using useNavigate in react-router-dom version 6. Here is what I am trying:
const handleSelect = (id: number) => {
navigate('/Players', {
userId: id,
});
};
However I I am getting the error: Argument of type '{ userId: number; }' is not assignable to parameter of type 'NavigateOptions'. Object literal may only specify known properties, and 'userId' does not exist in type 'NavigateOptions'.ts(2345)
I can't find any useful information on NavigateOptions or what type it is looking for. If I remove the parameter userId then I can navigate to the Player page just fine. It is just the parameter that is causing the problem. What can I do about this issue? Could someone provide some documentation on this?
What would be an example of a parameter that is of type NavigateOptions?
Did you mean to add state to the navigation? Original:
const handleSelect = (id: number) => {
navigate('/Players', {
userId: id,
});
};
Changed to (with state):
const handleSelect = (id: number) => {
navigate('/Players', {
state: {
userId: id,
}
});
};
Then you can reference props.location.state.userId in the Players page.