React Router Dom，使用 useNavigate 将数据传递给组件

【问题标题】：React Router Dom, pass data to a component with useNavigateReact Router Dom，使用 useNavigate 将数据传递给组件
【发布时间】：2022-07-07 23:43:53
【问题描述】：

我正在使用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>
)}

【问题讨论】：

标签： javascript reactjs react-hooks react-router-dom

【解决方案1】：

1。解决方案

您可以像这样将数据传递给 React Router Dom v6 中与 /chatroom 对应的组件：

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

并以这种方式在useLocation hook 的帮助下使用它：

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 时才有效。

【讨论】：