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>
)}

CodePudding user response：

1. Solution

You can pass data to the component that corresponds to /chatroom like this :

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

And consume with the help of useLocation 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.