1轧坎、路由的跳轉(zhuǎn)
一宏邮、DOM跳轉(zhuǎn)
在需要跳轉(zhuǎn)的頁面導(dǎo)入import {Link} from 'react-router-dom',在需要跳轉(zhuǎn)的地方使用link標簽的to屬性進行跳轉(zhuǎn)缸血,路由配置文件中導(dǎo)出的那個類名相當于相當于router-view標簽蜜氨,在需要展示的地方引入這個類金星秀展示
1、在路由配置文件中配置路由
2捎泻、在需要跳轉(zhuǎn)的頁面引入? import {Link} from 'react-router-dom'
3飒炎、使用link標簽進行跳轉(zhuǎn)
4、在需要展示的區(qū)域進行展示
二笆豁、js跳轉(zhuǎn)
使用this.props.history.push('/child02')
當點擊事件觸發(fā)時郎汪,調(diào)用函數(shù),在函數(shù)中用js代碼實現(xiàn)跳轉(zhuǎn)
2闯狱、路由的傳參
一煞赢、params傳參
1、在路由配置中以/:的方式評接參數(shù)標識
2扩氢、在路徑后面將參數(shù)評接上(/參數(shù))
3耕驰、在被跳轉(zhuǎn)頁使用this.props.match.params.xxx(此處為id)? ? 接收參數(shù)
二、query傳參
1录豺、在router文件中配置為正常配置? ?<Route path="/Child03" component={Child03}/>
2朦肘、在跳轉(zhuǎn)時? 路徑為一個對象{}? ? ?其中 pathname為路徑? query為一個對象? 對象里是攜帶的參數(shù)
3、使用this.props.location.query接收參數(shù)
三双饥、state傳參
使用this.props.location.state接收參數(shù)