web前端培训ReactRouter必备知识点

浼氬厛琚姞杞斤紝鐒跺悗浼氳鍔犺浇鍒伴噷闈€備絾鏄紝瀹為檯杩愯涓婇潰鐨勪唬鐮佸彂鐜帮紝瀹冨彧娓叉煋浜嗘牴鐩綍涓嬬殑鍐呭銆傚悗缁姣擱eact-Router鐗堟湰鍙戠幇鏄洜涓哄湪V4鐗堟湰鏀瑰彉浜嗗畠鐨勬覆鏌撻€昏緫銆傚師鍥犳嵁璇存槸涓轰簡璺佃React鐨勭粍浠跺寲鐞嗗康锛岃€屼笉鏄Route鏍囩鐪嬭捣鏉ュ彧鏄竴涓爣绛撅紙鏂板浜嗗钁╃煡璇嗭級銆傜幇鍦ㄥ湪杈冩柊鐨勭増鏈腑锛屽彲浠ヤ娇鐢≧ender鏂规硶瀹炵幇宓屽銆?Routepath="/"render={()=>()}/>姝ゆ椂璁块棶/in鏃讹紝鈥滃灞傗€濆拰鈥滃唴灞傗€濅細涓€璧锋樉绀恒€傚悓鏍凤紝璁块棶/others鏃讹紝鈥滃灞傗€濆拰鈥渙thers鈥濅細涓€璧锋樉绀恒€傝矾鐢卞弬鏁颁紶閫掓妧宸у湪瀹為檯寮€鍙戜腑锛岀粡甯搁渶瑕佸湪椤甸潰鍒囨崲鏃朵紶閫掍竴浜涘弬鏁般€傛湁浜涘弬鏁伴€傚悎鏀惧湪Redux涓綔涓哄叏灞€鏁版嵁锛屾垨鑰呴€氳繃涓婁笅鏂囦紶閫掞紝姣斿涓氬姟鐨勪竴浜涘叡浜暟鎹紝浣嗘槸鏈変簺鍙傛暟閫傚悎鏀惧湪URL涓紶閫掞紝姣斿椤甸潰绫诲瀷鎴栬€呭敮涓€鎬ц缁嗕俊鎭〉闈腑鏂囨。鐨勬爣璇唅d銆傚湪澶勭悊URL鐨勬椂鍊欙紝React-Router闄や簡甯﹀弬鏁扮殑闂彿杩樿兘涓烘垜浠仛浠€涔堝憿锛熷叾涓紝Route缁勪欢鐨刾ath灞炴€у彲浠ョ敤鏉ユ寚瀹氳矾鐢辩殑鍖归厤瑙勫垯銆傚満鏅竴璇存槑锛氬鏋滄兂璁╀竴涓櫘閫氱殑URL鏈変竴涓櫘閫氱殑鍙傛暟锛岄偅涔堟垜浠彲浠ヨ繖鏍峰仛锛氭渚婣锛氳矾鐢卞弬鏁皃ath="/book/:id"锛屾垜浠彲浠ヤ娇鐢ㄥ啋鍙?鍙傛暟鍚嶈繖鏍风殑鏂瑰紡锛屾坊鍔犺浼犻€掔粰URL鐨勫弬鏁般€傛鏃讹紝褰撳弬鏁板悕锛堟湰渚嬩负id锛夊搴旂殑鍊煎彂鐢熷彉鍖栨椂锛屼細璁や负鏄笉鍚岀殑URL_front-end璁粌銆傛渚婤锛氭煡璇㈠弬鏁皃ath="/book"濡傛灉鎯冲湪椤甸潰璺宠浆鏃舵妸鍙傛暟鍖呭惈鍦ㄩ棶鍙蜂腑锛岄偅涔堣矾寰勫彲浠ョ洿鎺ヨ璁℃垚棰勫畾鐨勶紝鐢辫烦杞柟鎷兼帴鍙傛暟.璺宠浆鐨勬椂鍊欐湁涓ょ甯﹀弬鏁扮殑褰㈠紡銆備竴绉嶆槸鍦↙ink缁勪欢鐨則o鍙傛暟涓紶閫掍竴涓厤缃瓧绗︿覆锛岀敤闂彿鍙栧弬鏁般€傚彟涓€绉嶆槸to鍙傛暟鍙互鎺ュ彈涓€涓璞★紝鍏朵腑浣犺浼犻€掔殑鍙傛暟鍙互鍦ㄦ悳绱㈠瓧娈典腑閰嶇疆銆?Linkto="/book?id=111"/>//鎴?Linkto={{pathname:'/book',search:'?id=111',}}/>姝ゆ椂锛屽亣璁惧綋鍓峱ageURL涓殑id鐢?11鏀逛负222鏃讹紝璺敱瀵瑰簲鐨勭粍浠讹紙涓婁緥涓厤缃甊eact-Route鏃秔ath="/book"瀵瑰簲鐨刾age/component锛変細琚洿鏂帮紝鍗筹紝componentDidUpdate鏂规硶浼氳鎵ц锛屼絾涓嶄細Mounting锛屽嵆componentDidMount鏂规硶涓嶄細琚墽琛屻€侰aseC:Invisiblequeryparameterswithpath="/book"璺緞杩樻槸璁捐鐨勫簲璇ョ殑锛岃烦杞殑鏃跺€欏彲浠ラ€氳繃Link涓殑state鎶婂弬鏁颁紶閫掔粰璺敱瀵瑰簲鐨勯〉闈€?Linkto={{pathname:'/book',state:{id:111}}}/>浣嗘槸闇€瑕佹敞鎰忕殑鏄紝杩欑鏂瑰紡铏界劧涓嶄細鏄庢枃浼犻€掓煡璇㈠弬鏁帮紝浣嗘槸椤甸潰鍒锋柊浼氫骇鐢熷湪涓㈠け鍙傛暟锛堝瓨鍌ㄧ姸鎬佺殑閫氱梾锛夛紝鎵€浠ワ紝寰€寰€涓嶆帹鑽悀~锛堝叾瀹炴垜涓嶅笇鏈涙槑鏂囪鍔犲瘑锛屼絾鏄竴鑸晱鎰熶俊鎭笉鎺ㄨ崘浼犻€掑湪URL涓瓇锛夊満鏅?璇存槑锛氬浜庣紪杈?璇︽儏椤甸潰锛屽鏋滆鍒嗕韩涓€涓〉闈紝閫氳繃涓嶅悓鐨勫弬鏁板尯鍒哢RL銆傝繖鏃舵垜浠笇鏈涘弬鏁板繀椤绘槸edit銆乨etail銆乤dd鍏朵腑涔嬩竴锛屽惁鍒欓渶瑕佽烦杞埌404NotFound椤甸潰銆俻ath='/book/:pageType(edit|detail|add)'濡傛灉涓嶆坊鍔犳嫭鍙蜂腑鐨勫唴瀹?edit|detail|add)锛屽綋浣犱紶鍏ラ敊璇殑鍙傛暟鏃讹紙姣斿鐢ㄦ埛璇搷浣滄垨闅忔剰鎷兼帴URL锛夛紝鍒欓〉闈笉浼氳404鎷︽埅锛岃€屾槸缁х画娓叉煋椤甸潰鎴栬皟鐢ㄦ帴鍙ｏ紝浣嗘鏃跺緢鍙兘瀵艰嚧鎺ュ彛鍙傛暟閿欒鎴栭〉闈㈤敊璇€傚満鏅笁鎻忚堪锛氭柊椤甸潰鍜岀紪杈戦〉闈㈠緢鍍忥紝鎴戠殑鏂伴〉闈篃鎯冲拰缂栬緫/璇︽儏鍏变韩涓€涓〉闈€備絾鏄柊寤洪〉闈笉闇€瑕乮d锛岀紪杈?璇︽儏椤甸渶瑕乮d銆備娇鐢ㄥ悓涓€涓〉闈㈡€庝箞鍔烇紵path='/book/:pageType(edit|detail|add)/:id?'涓嶇敤鎷呭績锛屾偍鍙互浣跨敤?瑙ｅ喅瀹冦€傝〃绀篿d涓嶆槸蹇呴』鍙傛暟锛屽彲浠ヤ紶涔熷彲浠ヤ笉浼犮€傚満鏅?鎻忚堪锛氭垜鐨刬d鍙兘鏄暟瀛楋紝涓嶈瀛楃涓叉€庝箞鍔烇紵path='/book/:id(\\d+)'杩欐椂鍊欏綋id涓嶆槸鏁板瓧鏃讹紝浼氳烦杞埌404锛岃涓烘壘涓嶅埌璇RL瀵瑰簲鐨勯〉闈€傝繖涔堝搴曞眰渚濊禆锛孯outer鏄€庝箞瀹炵幇鐨勫憿锛熶簨瀹炰笂锛屽畠鐨勫簳灞備緷璧栦簬path-to-regexp(https://github.com/pillarjs/p...)鏂规硶銆倂arpathToRegexp=require('path-to-regexp')//pathToRegexp(path,keys,options)//渚嬪瓙varkeys=[]varre=pathToRegexp('/foo/:bar',keys)//re=/^/foo/(1+?)/?$/i//keys=[{name:'bar',prefix:'/',delimiter:'/',optional:false,repeat:false,pattern:'2+锛焳]delimiter锛氶噸澶嶅弬鏁扮殑鍒嗛殧绗︼紝榛樿涓?/'锛屽彲浠ラ厤缃竴浜涘叾浠栧父鐢ㄧ殑璺敱姝ｅ垯閫氶厤绗︼細?鍙傛暟鍚嶏紝浣嗗彧鑳芥槸璺敱瑙勫垯锛屾瘮濡備笅闈唬鐮佷腑/:foo鍚庨潰鐨勫弬鏁帮細varre=pathToRegexp('/:foo/(.*)',keys)//matchexcept"\n"anycharacter//keys=[{name:'foo',...},{name:0,...}]re.exec('/test/route')//=>['/test/route','test','route']涔熶細琚纭В鏋愶紝浣嗘槸鍦ㄦ柟娉曞鐞嗗唴閮紝鏈懡鍚嶇殑鍙傛暟鍚嶄細琚浛鎹负鏁扮粍涓嬫爣銆傚彇璺敱鍙傛暟path鐨勫弬鏁帮紝鍙互閫氳繃this.props.match鑾峰彇渚嬪锛?/url涓?book/:pageType(edit|detail|add)const{match}=this.props;const{pageType}=鍖归厤銆俻arams;鍥犱负#锛?涔嬪悗鐨勬墍鏈夊唴瀹归兘浼氳璁や负鏄痟ash鐨勪竴閮ㄥ垎锛寃indow.location.search鏃犳硶鑾峰彇甯﹂棶鍙风殑鍙傛暟銆傛瘮濡傦細http://aaa.bbb.com/book-cente...閭ｄ箞鍦≧eact-Router涓紝鍙互閫氳繃this.props.location鑾峰彇甯﹂棶鍙风殑鍙傛暟锛堝畼鏂规帹澧欚煈嶏級銆備釜浜虹悊瑙ｆ槸鍥犱负React-Router甯垜浠仛浜嗗鐞嗭紝閫氳繃璺敱鍜屽搱甯屽€硷紙window.location.hash锛夊皝瑁呬簡瑙ｆ瀽銆備緥濡傦細//url鏄?book?pageType=editconst{location}=this.props;constsearchParams=location.search;//?pageType=edit瀹為檯涓婃墦鍗扮殑鏄痯rops鍙傛暟锛宼his.props.history.location涔熷彲浠ュ彇闂彿鍙傛暟锛屼絾涓嶆帹鑽愶紝鍥犱负React鐨勭敓鍛藉懆鏈燂紙componentWillReceiveProps,componentDidUpdate锛変細瀵艰嚧涓嶅彲闈犮€傦紙鍙傝€冿細https://blog.csdn.net/zrq1210...锛塕eact-Router2.0鏃╂湡鐗堟湰鍙互浣跨敤location.query.pageType鑾峰彇鍙傛暟锛屼絾鏄疺4.0鍘绘帀浜嗭紙鏈変簺浜鸿涓篞uery鍙傛暟涓嶆槸URL鐨勪竴閮ㄥ垎锛屾湁浜鸿涓虹涓夋柟搴撳緢澶氾紝寮€鍙戣€呰嚜宸辫В鏋愪細濂戒竴浜涖€傚浜庝笂涓€鑺傚満鏅竴涓殑CaseC锛屽綋query鍙傛暟鏄殣韬甫杩涙潵鐨勶紙浠巗tate甯﹁繃鏉ワ級锛屽彲浠ュ湪this.props.location.state涓幏鍙栧埌锛堜笉鎺ㄨ崘锛屼笉鎺ㄨ崘锛宺efresh涓嶄細~锛夊紑鍏?div>

image

}/>

Book

}/>