方式 一:
? ? ? ???通過(guò)params
?? ?? ? 1.路由表中 ? ? ?
? ? ? ? ? ? ? <Route?path=' /sort/:id ' ??component={Sort}></Route>
?? ?? ? 2.Link處 ? ? ? ?
? ? ? ? ? ??HTML方式
? ? ? ? ? ? ? ? ?<Link to={ ' /sort/ ' + ' 2 ' }? activeClassName='active'>XXXX</Link>? ? ? ? ??
? ? ? ? ??JS方式
? ? ? ? ? ? ? ? this.props.history.push(? '/sort/'+'2'? )
?? ?? ? 3.sort頁(yè)面? ? ? ?
通過(guò)? this.props.metch.params.id
就可以接受到傳遞過(guò)來(lái)的參數(shù)(id)
方式 二:
? ? ? ? ?通過(guò)query
? ? ? ? ? ? ? ? 前提:必須由其他頁(yè)面跳過(guò)來(lái),參數(shù)才會(huì)被傳遞過(guò)來(lái)
? ? ?注:不需要配置路由表。路由表中的內(nèi)容照常:<Route path='/sort' component={Sort}></Route>
?? ?? ? 1.Link處?? ???
? ? ? ???HTML方式
? ? ? ? ? ? <Link to={{ path : ' /sort ' , query : { name : 'sunny' }}}>
? ? ? ?JS方式
? ? ? ? ? ? this.props.history.push({ path : '/sort' ,query : { name: ' sunny'} })
?? ?? ? 2.sort頁(yè)面? ? ?
? ? ? ? ? ? ? this.props.location.query.name
?方式 三:
? ? ? ??通過(guò)state
? ?? ? ?? ? 同query差不多,只是屬性不一樣,而且state傳的參數(shù)是加密的,query傳的參數(shù)是公開(kāi)的,在地址欄
?? ?? ? 1.Link 處?? ???
? ? ? ? ??HTML方式:
? ? ? ? ? ? ? ? <Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}>?
? ? ? ???JS方式:
? ? ? ? ? ? this.props.history.push({ pathname:'/sort',state:{name : 'sunny' } })
?? ?? ? 2.sort頁(yè)面?? ?? ?
? ? ? ? ? ? this.props.location.state.name