React Router将数据从一个组件传递到另一个组件

// 定义带有参数的路由
<Route path="/user/:id" component={UserDetail} />

// 在目标组件中获取并使用参数
const UserDetail = (props) => {
  const userId = props.match.params.id;
  // 使用userId进行相应的数据操作
  // ...
};

// 在源组件中传递数据
<Link to={{
  pathname: '/target',
  state: { data: 'Hello World' }
}}>Go to Target</Link>

// 在目标组件中获取并使用数据
const Target = (props) => {
  const data = props.location.state.data;
  // 使用data进行相应的数据操作
  // ...
};

// 创建全局状态上下文
const MyContext = React.createContext();

// 在父组件中提供数据
const ParentComponent = () => {
  const [data, setData] = useState('Hello World');

  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// 在子组件中获取数据
const ChildComponent = () => {
  const data = useContext(MyContext);
  // 使用data进行相应的数据操作
  // ...
};