React路由里exact和switch的区别
exact属性
react的路由匹配默认是模糊的,包容的,如果想使用严格匹配,那么,把Route组件的exact属性设置为true。
<Route exact={true} path="/" component={App} />
假如,有如下路由配置:
<BrowserRouter>
<Route path="/" component={App} />
<Route path="/My" component={My}/>
</BrowserRouter>
地址栏中输入:http://localhost:3000/My,那么路径 “/My”,匹配到的路径是: “/” 和
“/My”,并且,在浏览器会把匹配到的所有组件的内容进行显示。
如果希望 路径 /My 值匹配 path=“/My”,那么,这么写:<Route exact={true} path="/" component={App} />
Switch:排他性匹配
react默认的路由匹配是包容性的,即:匹配到的多个路由对应的所有组件会同时被显示在页面上。如果只希望显示匹配到的第一个组件(换句话说:匹配到的第一个符合要求的路径后,其它路径就不再做匹配),那么使用switch。
路由配置改成如下:
<BrowserRouter>
<Switch>
<Route exact={true} path="/" component={App} />
<Route path="/My" component={My}/>
<Route component={Error}/> 总是会匹配
</Switch>
</BrowserRouter>
地址栏中输入:http://localhost:3000/My,那么路径 “/My”,只会让浏览器显示匹配到的第一个组件My。
exact和switch区别?
excat:表示匹配规则,exact={true} 表地址栏的路径和路由配置中path一定要完全相等
switch:表示排他性,即:一旦匹配成功后,就不再匹配其它路由
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)