React Router Dom，使用 useNavigate 將數據傳遞給組件

Question

我正在使用useNavigate轉到組件，並且在單擊按鈕時需要將數據（狀態）傳遞給此ChatRoom組件。 該組件位於/chatroom路線上。 我正在使用 React Router Dom v6 。 我已閱讀文檔，但找不到所需的內容。

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.解決方案

您可以將數據傳遞給與 React Router Dom v6中的/chatroom對應的組件，如下所示：

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

並以這種方式在useLocation鈎子的幫助下使用它：

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

如果您想傳遞多個狀態，請使用一個對象，如下所示：

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

2. 故障排除

正如您可以在此CodeSandbox上嘗試的那樣，它僅在傳遞的數據稱為state時才有效。