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是必須的，否則會報錯