怎么在react中對(duì)路由進(jìn)行配置?相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
網(wǎng)站的建設(shè)成都創(chuàng)新互聯(lián)公司專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為成都生料攪拌車等企業(yè)提供專業(yè)服務(wù)。包含了LInk跳轉(zhuǎn)以及js觸發(fā)跳轉(zhuǎn)并傳參。
這是項(xiàng)目的目錄結(jié)構(gòu),主要的代碼都在src目錄下,src下面新建一個(gè)containers文件夾放我們的一些組件,router文件夾是配置路由用的。
按照順序來寫:detail文件夾下的代碼
import React from 'react' class Detail extends React.Component { render() { return ( <p>Detail,url參數(shù):{this.props.params.id}</p> ) } } export default Detail
home:
import React from 'react' import { Link } from 'react-router' class Home extends React.Component { render() { return ( <div> <p>Home</p> <Link to="/list">to list</Link> </div> ) } } export default Home
list:
import React from 'react' import { hashHistory } from 'react-router' class List extends React.Component { render() { const arr = [1, 2, 3] return ( <ul> {arr.map((item, index) => { return <li key={index} onClick={this.clickHandler.bind(this, item)}>js jump to {item}</li> })} </ul> ) } clickHandler(value) { hashHistory.push('/detail/' + value) } } export default List
404yemian:
import React from 'react' class NotFound extends React.Component { render() { return ( <p>404 NotFound</p> ) } } export default NotFound
在containers下面有一個(gè)app.jsx總?cè)肟谖募?/p>
import React from 'react' class App extends React.Component { render() { return ( <div>{this.props.children}</div> ) } } export default App
router文件夾下的:
import React from 'react' import { Router, Route, IndexRoute } from 'react-router' import App from '../containers/App' import Home from '../containers/Home' import List from '../containers/List' import Detail from '../containers/Detail' import NotFound from '../containers/NotFound' class RouteMap extends React.Component { updateHandle() { console.log('每次router變化之后都會(huì)觸發(fā)') } render() { return ( <Router history={this.props.history} onUpdate={this.updateHandle.bind(this)}> <Route path='/' component={App}> <IndexRoute component={Home}/> <Route path='list' component={List}/> <Route path='detail/:id' component={Detail}/> <Route path="*" component={NotFound}/> </Route> </Router> ) } } export default RouteMap
最終最外層的index.js:
import React from 'react' import { render } from 'react-dom' import { hashHistory } from 'react-router' import RouteMap from './src/router/routeMap' render( <RouteMap history={hashHistory}/>, document.getElementById('App') )
使用的router版本是^2.8.1,如果下載的是4.0以上的版本,那么寫法就和現(xiàn)在的幾乎是完全不一樣,他做了很大的改動(dòng),配置的時(shí)候注意router的版本號(hào)。
看完上述內(nèi)容,你們掌握怎么在react中對(duì)路由進(jìn)行配置的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道,感謝各位的閱讀!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)站標(biāo)題:怎么在react中對(duì)路由進(jìn)行配置-創(chuàng)新互聯(lián)
文章出自:http://muchs.cn/article36/eiepg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動(dòng)網(wǎng)站建設(shè)、軟件開發(fā)、App開發(fā)、靜態(tài)網(wǎng)站、動(dòng)態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容