React页面传值的做法

props.params

我们可以使用指定一个path。然后指定通配符可以携带参数到指定的path：

首先先引入路由相关的组件

import {BrowserRouter as Router, Route} from 'react-router-dom';

之后是路由的逻辑

function App() {
  return (
      
          =
      
  );
}

之后是到User对应的页面取出相应的值。

export default function User(props) {
    return (
        

            {props.match.params.name}
        
    );
};

测试

我们可以使用组件和history进行测试。

User

使用props的history组件

props.history.push("/home/user/transfer");

query

props.params的方式传递是很方便但是有一个缺点，就是无法传递对象类型的数据。

如何使用query的方式：

1. 首先定义路由

之后编写跳转页面的行为

const handleClick = () => {
    let data = {firstName: 'HF', lastName: 'R'};
    let path = {
        pathname: '/home/user',
        query: data,
    };
    props.history.push(path);
};

跳转到User页面后需要接收数据

    {props.location.query.firstName}

query方式可以传递任意类型的数据，但是拼接工作很繁琐，有没有方法像post方式传递数据使得传递的数据不以明文的形式传输。

state

state方式和query方式很像，只需要在query的基础上修改两个地方。

一个是传值操作的时候

let data = {firstName: 'HF', lastName: 'R'};
let path = {
    pathname: '/home/user',
    state: data,
};
props.history.push(path);

另一个是在接收值的时候

    {props.location.state.firstName}

state方式可以传递任意类型的数据，而且不以明文的方式传递。