React Router Dom, pass data to a component with useNavigate

Question

I'm using useNavigate to go to the component and need to pass data (a state) to this this ChatRoom component when I click a button. This component is on the route /chatroom . I'm using React Router Dom v6 . I have read the documentation but I cannot find what I'm looking for.

export default function Home() {
  const [username, setUsername] = useState("");
  const [room, setRoom] = useState("");

  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/chatroom");
  };

  return (<button
            type="submit"
            className="btn"
            onClick={() => {
              handleClick();
            }}
          >
            Join Chat
          </button>
)}

Answer 1

1. Solution

You can pass data to the component that corresponds to /chatroom in React Router Dom v6 like this:

navigate('/chatroom', { state: "Hello World!" });

And consume it with the help of useLocation hook this way:

import { useLocation } from "react-router-dom";
function ChatRoom() {
  const { state } = useLocation();
  return (
    <div>
      {state}
    </div>
  );
}
export default Chatroom;

If you wanna pass multiple state, use an object, like so:

navigate('/chatroom', { state: {id:1, text: "Hello World!"} });

2. Troubleshot

As you can try it here on this CodeSandbox , it works only if the passed data is called state .