如何在react中的路由之间传递数据

在React中，可以使用多种方式在路由之间传递数据。以下是一些常用的方法：

使用URL参数：可以在URL中添加参数来传递数据。在React中，可以使用react-router-dom库的<Link>组件来生成带参数的URL，并在目标组件中通过props.match.params来获取参数值。例如：

// 发送数据的组件
import { Link } from 'react-router-dom';

const MyComponent = () => {
  const data = { name: 'John', age: 25 };
  return (
    <Link to={{ pathname: '/target', state: data }}>Go to Target</Link>
  );
};

// 接收数据的组件
const TargetComponent = (props) => {
  const data = props.location.state;
  return (
    <div>
      <h1>Name: {data.name}</h1>
      <h1>Age: {data.age}</h1>
    </div>
  );
};

使用React Context：React Context提供了一种在组件树中共享数据的方式。可以在父组件中创建一个Context，并通过Provider组件将数据传递给子组件。子组件可以通过Consumer组件或useContext钩子来获取数据。例如：

// 创建Context
const MyContext = React.createContext();

// 发送数据的组件
const MyComponent = () => {
  const data = { name: 'John', age: 25 };
  return (
    <MyContext.Provider value={data}>
      <Link to="/target">Go to Target</Link>
    </MyContext.Provider>
  );
};

// 接收数据的组件
const TargetComponent = () => {
  const data = useContext(MyContext);
  return (
    <div>
      <h1>Name: {data.name}</h1>
      <h1>Age: {data.age}</h1>
    </div>
  );
};