How to pass parameters with React-router-dom version 6 useNavigate and typescript

Question

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?

Answer 1

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.

// Players Page

import { useLocation } from "react-router-dom";

const location = useLocation();

// get userId
let userId = location.state.userId;