react中页面如何传值-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

react中页面传值的方法：1、使用【props.params】方法，代码为【】；2、使用query方式使用很简单，类似于表单中的get方法，传递参数为明文。

react中页面传值的方法：

一、props.params

官方例子使用React router定义路由时，我们可以给<Route>指定一个path，然后指定通配符可以携带参数到指定的path：

首先定义路由到UserPage页面:

import { Router,Route,hashHistory} from 'react-router';
class App extends React.Component {
  render() {
    return (
        <Router history={hashHistory}>
            <Route path='/user/:name' component={UserPage}></Route>
        </Router>
    )
  }
}

上面指定参数一个参数name

使用：

1	`import {Link,hashHistory} from` `'react-router';`

1、Link组件实现跳转：

1	`<Link to="/user/sam">用户</Link>`

2、history跳转：

1	`hashHistory.push("/user/sam");`

当页面跳转到UserPage页面之后，取出传过来的值：

export default class UserPage extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(<div>this.props.params.name</div>)
    }
}