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>
)}
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!"} });
As you can try it here on this CodeSandbox, it works only if the passed data is called state.