如何使用Hooks在页面Reactjs之间传递数据？

// 页面1
import React, { useState } from 'react';

function Page1() {
  const [name, setName] = useState('');

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => {}}>传递</button>
    </div>
  );
}

export default Page1;

// 创建上下文
const MyContext = React.createContext();

// 页面1
import React, { useState } from 'react';

function Page1() {
  const [name, setName] = useState('');

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <MyContext.Provider value={name}>
        <Page2 />
      </MyContext.Provider>
    </div>
  );
}

export default Page1;

// 页面2
import React, { useContext } from 'react';
import MyContext from './MyContext';

function Page2() {
  const name = useContext(MyContext);

  return (
    <div>
      <p>传递的名字是：{name}</p>
    </div>
  );
}

export default Page2;