react怎么实现跨页面传参

在React中，可以使用路由参数、路由状态管理、Context API和本地存储等方式来实现跨页面传参。下面分别介绍这几种方法：

1、路由参数

在React Router中，可以通过路由参数来传递数据。在定义路由时，可以使用动态路由参数来接收参数值，在组件中通过this.props.match.params来获取参数值。

首先，在路由配置文件中定义带参数的路由：

javascript 复制代码

// 路由配置文件（routes.js）
import UserComponent from './UserComponent';

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: UserComponent
  }
];

export default routes;

然后，在组件中通过this.props.match.params来获取参数值：

javascript 复制代码

// 组件（UserComponent.jsx）
import React from 'react';

export default class UserComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const userId = this.props.match.params.id;
    // 使用获取到的参数值进行相应的操作
  }
}

当切换到/user/123路径时，this.props.match.params.id的值将为123。

2、路由状态管理

如果需要在多个页面之间传递复杂的数据或共享状态，可以使用路由状态管理。在React中，可以使用Redux或MobX等状态管理库来实现路由状态管理。

首先，在状态管理库中定义一个全局状态，并提供相应的action和reducer方法：

javascript 复制代码

// Redux store（store.js）
import { createStore } from 'redux';

const initialState = {
  userData: null
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_USER_DATA':
      return { ...state, userData: action.payload };
    default:
      return state;
  }
}

export default createStore(rootReducer);

最后，在需要接收数据的页面中通过selector方法来获取数据：

javascript 复制代码

// 组件B
import { connect } from 'react-redux';

function ComponentB(props) {
  return (
    <div>{props.userData && props.userData.name}</div>
  );
}

const mapStateToProps = state => ({
  userData: state.userData
});

export default connect(mapStateToProps)(ComponentB);

在组件B中，可以通过props.userData来获取从组件A传递过来的数据。

3、context API

React的Context API提供了一种在组件树中共享数据的方式，可以在某些情况下替代路由状态管理。可以通过React.createContext()方法创建一个Context对象，在父组件中使用<MyContext.Provider>来提供数据，在子组件中使用<MyContext.Consumer>来获取数据。

首先，在父组件中创建Context对象并提供数据：

javascript 复制代码

// 父组件
import React from 'react';

export const UserContext = React.createContext({
  userData: null,
  setUserData: () => {}
});

export default class ParentComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      userData: null
    };
  }

  setUserData = data => {
    this.setState({ userData: data });
  };

  render() {
    return (
      <UserContext.Provider value={{ userData: this.state.userData, setUserData: this.setUserData }}>
        <ChildComponent />
      </UserContext.Provider>
    );
  }
}

然后，在子组件中使用<UserContext.Consumer>来获取数据：

javascript 复制代码

// 子组件
import React from 'react';
import { UserContext } from './ParentComponent';

export default function ChildComponent() {
  return (
    <UserContext.Consumer>
      {({ userData }) =>
        <div>{userData && userData.name}</div>
      }
    </UserContext.Consumer>
  );
}

在子组件中，可以通过Context API获取到从父组件传递过来的数据。

4、本地存储

如果需要在不同的页面之间传递简单的数据或状态，可以使用本地存储。React中可以使用localStorage或sessionStorage来实现本地存储。

首先，在需要传递数据的页面中将数据存储到本地存储：

javascript 复制代码

// 组件A
import React from 'react';

export default class ComponentA extends React.Component {
  constructor(props) {
    super(props);
  }

  sendData = () => {
    const data = {
      name: 'John',
      age: 25
    };
    localStorage.setItem('userData', JSON.stringify(data));
  };

  render() {
    return (
      <button onClick={this.sendData}>Send Data</button>
    );
  }
}

然后，在需要接收数据的页面中从本地存储中获取数据：

javascript 复制代码

// 组件B
import React from 'react';

export default class ComponentB extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      userData: null
    };
  }

  componentDidMount() {
    const storedData = localStorage.getItem('userData');
    if (storedData) {
      const userData = JSON.parse(storedData);
      this.setState({ userData });
    }
  }

  render() {
    return (
      <div>{this.state.userData && this.state.userData.name}</div>
    );
  }
}

在组件B中，可以通过this.state.userData来获取从组件A存储到本地存储中的数据。

以上是在React中实现跨页面传参的几种常用方法：路由参数、路由状态管理、Context API和本地存储。选择哪种方法取决于具体的需求和场景。