react-router中exact使用

exact是Route的一個屬性轨蛤,認為其是一種嚴格匹配模式

當exact為false時晨汹,根據(jù)路由匹配所有組件,例如/a/b/c 能匹配到/桃漾、/a坏匪、/a/b、/a/b/c 且匹配還是按順序的

例如路由設(shè)置的前后順序為:

1./ 呈队;

2. /a剥槐;

3. /a/b ;?

4./a/b/c

且前3個路徑都沒有設(shè)置?exact,這樣前3個組件都會被渲染并且默認將2當作1的子頁面宪摧,3當作2的子頁面

當exact為true時粒竖,例如/被設(shè)置exact=true ,那么’/home‘則無法匹配到’/‘几于,因為’/‘無法被渲染蕊苗;若’/home‘是’/‘子頁面,那么獲取的效果’/home‘會是一個空白頁


再如:‘/’路徑下有兩個子頁面沿彭,為了保證子頁面正常顯示沒有將‘/’的exact設(shè)置為true朽砰,加上一個獨立頁面‘/login’ 此時‘/login’若配置在‘/’后,

則會渲染‘/’頁面喉刘,而‘/login’被視為‘/’的組件也沒有被渲染瞧柔,此時更換位置,將‘/login’配置在‘/’之前睦裳,則先匹配到‘/login’進行渲染



實際應用中設(shè)置該屬性造锅,取決于頁面的構(gòu)造。

1.若一個頁面中沒有嵌套其他子頁面廉邑,大可將其設(shè)置為exact=true哥蔚,它不會影響其他的獨立頁面

2.若一個頁面嵌套了子頁面,則不能將exact=true 蛛蒙,否則子頁面的父頁面不能渲染導致頁面為空糙箍,且路徑設(shè)置時注意父頁面為’/home‘,子頁面的路徑為’/home/about‘牵祟,若設(shè)置成'/about'也會因匹配不到'/home'導致渲染為空

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末深夯,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子诺苹,更是在濱河造成了極大的恐慌咕晋,老刑警劉巖,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件筝尾,死亡現(xiàn)場離奇詭異捡需,居然都是意外死亡,警方通過查閱死者的電腦和手機筹淫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門站辉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人损姜,你說我怎么就攤上這事饰剥。” “怎么了摧阅?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵汰蓉,是天一觀的道長。 經(jīng)常有香客問我棒卷,道長顾孽,這世上最難降的妖魔是什么祝钢? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮若厚,結(jié)果婚禮上拦英,老公的妹妹穿的比我還像新娘。我一直安慰自己测秸,他們只是感情好疤估,可當我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著霎冯,像睡著了一般铃拇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上沈撞,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天慷荔,我揣著相機與錄音,去河邊找鬼关串。 笑死拧廊,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的晋修。 我是一名探鬼主播吧碾,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼墓卦!你這毒婦竟也來了倦春?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤落剪,失蹤者是張志新(化名)和其女友劉穎睁本,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體忠怖,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡呢堰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了凡泣。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片枉疼。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖鞋拟,靈堂內(nèi)的尸體忽然破棺而出骂维,到底是詐尸還是另有隱情,我是刑警寧澤贺纲,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布航闺,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏潦刃。R本人自食惡果不足惜侮措,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望福铅。 院中可真熱鬧萝毛,春花似錦项阴、人聲如沸滑黔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽略荡。三九已至,卻和暖如春歉胶,著一層夾襖步出監(jiān)牢的瞬間汛兜,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工通今, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留粥谬,地道東北人。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓辫塌,卻偏偏與公主長得像漏策,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子臼氨,可洞房花燭夜當晚...
    茶點故事閱讀 43,440評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 安裝 示例 容器組件 react-router的容器組件掺喻,就是最外層包括所有路由的組件,所有路由活動需要在容器組件...
    Mr無愧于心閱讀 1,608評論 0 1
  • VUE Vue :數(shù)據(jù)驅(qū)動的M V Vm框架 m :model(后臺提供數(shù)據(jù))储矩,v :view(頁面)感耙,vM(模板...
    wudongyu閱讀 5,386評論 0 11
  • 路由,其實就是指向的意思持隧,當我點擊頁面上的home按鈕時即硼,頁面中就要顯示home的內(nèi)容,如果點擊頁面上的about...
    裘馬輕狂大帥閱讀 747評論 0 5
  • 用Vue.js + vue-router創(chuàng)建單頁應用屡拨,是非常簡單的只酥,基本是這樣的: 組件 → 路由 → 渲染地方 ...
    阿go閱讀 1,395評論 0 0
  • 1路由,其實就是指向的意思洁仗,當我點擊頁面上的home按鈕時层皱,頁面中就要顯示home的內(nèi)容,如果點擊頁面上的abou...
    你好陌生人丶閱讀 1,615評論 0 6