react-router-dom Route\Switch\exact

·  阅读 123

reactrouter.com/web/api/Nav…

官方释义:值为true时,只有在路由完全匹配的组件才会被应用。

  • 情况一:Route被Switch包裹

     <Switch>
    
     <Route path='/login' component={Login} exact/>  
    
     <Route path='/main' component={Main} />
    
    </Switch>
    复制代码

    Main组件下面如果有子组件的切换,比如菜单栏的切换,则不能加exact, 必须在子路由上去加exact,

    否则无法匹配 到子路由;例如:

    子路由 /main/option1 就匹配不到

    只能是在 上加exact

  • 情况二:Route不被Switch包裹的情况

    <HashRouter>  
    
     <Route path='/login' component={Login} />  
    
     <Route path='/' component={Main} />
    
    </HashRouter>
    复制代码

    此时会匹配所有带'/' 的组件,也就是Login和Main 都会被渲染,如下图所示:

    解决这个问题有3个方法:

    (1)像情况一种,不单独使用'/'作为路由,比如'/main'

    (2)为path='/'的Route组件 添加exact属性;

    (3)将所有的Route组件用Switch组件包裹(情况一的写法)

    方法(2)的弊端,如果path='/' 的路由组件下还有子组件,比如菜单切换,那么可能就匹配不到;

    例如/main/option,就访问不到,情况一有提到,在父路由上添加exact,会匹配不到子路由;

    方法(2)是不适用的。

    Notes: Switch 是匹配第一个子级或,下面有官网释义截图

以上是我个人在开发过程中所遇到问题的记录,写的有问题的欢迎大家纠正

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改