react-router 4.2.0页面跳转-传参与不传参

1.不传参

第一步：定义route

import Login_Index from '../components/Login_Index.js';//引入页面
<Route path="/Login_Index " component={Login_Index }/> //path:单纯路径

第二步：导航跳转设置：单击“登录”按钮跳转到登录主页

<Link to="/Login_Index "> <Button >登录</Button> </Link>          

2.传参

第一步：定义route

import Login_Index from '../components/Login_Index.js';//引入页面
<Route path="/Login_Index/:userName " component={Login_Index }/> //path:将userName传到登录主页Login_Index 页面 加上：/:userName

第二步：导航跳转设置：单击“登录”按钮跳转到登录主页

• 具体数值

 <Link to="/Login_Index/储一凡"> <Button >登录</Button> </Link>     //或者 <Link to={'/App/Login_Index/储一凡'}>     

• 变量

let =Name='储一凡 '; 定义变量
 <Link to={'/App/Login_Index/' + Name}><Button >登录</Button> </Link>    

第三步：目标页面获取参数

console.log('userName'+this.props.match.params.userName);     //打印：储一凡    备注：match是必须的，否则会报错