React_Route 版本3.2.0
params方式
1)入口文件路由 路由表 <Router history={hashHistory}> <Route path='/Personal/:id' component={Personal} /> </Router>
|
2)传参页面 js跳转location.href = '#/Personal'; 或者html跳转<Link to={ '/Personal/' + '2' }>个人中心</Link> this.props.router.push('/Personal/' + '2');
|
3)接收页面 console.log(this.props.params.id);
|
query方式
1)入口文件路由 路由表 <Router history={hashHistory}> <Route path='/Personal' component={Personal} /> </Router>
|
2)传参页面 var data = {id:3,name:sam,age:36}; var path = { pathname:'/Personal', query:data, }
js跳转location.href = '#/Personal'; 或者html跳转<Link to={path}>个人中心</Link>
hashHistory.push(path);
|
3)接收页面 var data = this.props.location.query; var {id,name,age} = data;
|
state方式
state方式和query方式相近,只是第二步的传参页面query改为state,第三步的接收页面query也改为state,state方式传参数据不会以明文的方式显示在地址栏。