使用来自 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

你可以将数据传递给 React Router Dom 中

/chatroom

对应的组件

v6

像这样：

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!"} });

然后用

useLocation

钩子再次消耗它：

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