第一種方式:
1垂蜗、路由配置
? ? ?<Route key="about" path='/about/:id' component={About}/>
跳轉(zhuǎn)前頁面
2.Link處
? ? HTML
? ?<Link to={`/about/${id}`} >點擊跳轉(zhuǎn)</Link>
? ?JS
? ?this.props.history.push(`/about/${456}`);
3躲株、跳轉(zhuǎn)后頁面about獲取參數(shù)
? ?this.props.match.params.id
第二種方式:
通過query
前提:必須由其他頁面跳過來档悠,參數(shù)才會被傳遞過來
注:不需要配置路由表。路由表中的內(nèi)容照常:
?? ?? ? 1.Link處?? ???
? ? ? ???HTML方式
? ? ? ? ? ? <Link to={{ pathname: ' /about' , query : { id: 4567 }}}>
? ? ? ?JS方式
? ? ? ? ? ? this.props.history.push({ pathname : '/about' ,query : { id: 4567} })
?? ?? ? 2.about頁面? ? ?
? ? ? ? ? ? ? this.props.location.query.id
第三種方式:
通過state
同query差不多吆视,只是屬性不一樣,而且state傳的參數(shù)是加密的幅虑,query傳的參數(shù)是公開的褒墨,在地址欄
1.Link 處?? ???
? ?HTML方式:
? ? <Link to={{ pathname : ' /about' , state : { id: 4567}}}>?
? ? ?JS方式:
? ? ? this.props.history.push({ pathname:'/about',state:{id: 4567 } })
?? ?? ? 2.user頁面?? ?? ?
? ? ? ? ? ? this.props.location.state.id