• 技术文章 >web前端 >前端问答

    react中的switch的用法是什么

    长期闲置长期闲置2022-05-05 10:21:14原创169

    在react中,switch用于保证路由只渲染一个路径,用于解决route的唯一渲染;使用“<Switch>”包裹的情况下,当匹配完一个路径之后,就会停止渲染,若不使用“<Switch>”包裹,每一个被匹配到的“<Route>”都会被渲染。

    本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

    react中的switch的用法是什么

    每一个被匹配到的<Route>都将会被渲染 ,用<Switch>包裹,只会渲染一个路径

    为了解决route的唯一渲染,它是为了保证路由只渲染一个路径。

    <Switch>是唯一的,因为它仅仅只会渲染一个路径,当它匹配完一个路径后,就会停止渲染了。相比之下(不使用<Switch>包裹的情况下),每一个被location匹配到的<Route>将都会被渲染。

    如果配置了<Switch>

    <Router history={history}>
        <Switch>
            <Route path='/home' render={()=>(<div>首页</div>)}/>
            <Route path='/home' component={()=>(<div>首页</div>)}/>
        </Switch>
    </Router>

    11111.png

    如果没有配置<Switch>

    <Router history={history}>
        <Route path='/home' render={()=>(<div>首页</div>)}/>
        <Route path='/home' render={()=>(<div>首页</div>)}/>
    </Router>

    22222.png

    推荐学习:《react视频教程

    以上就是react中的switch的用法是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:React不支持less文件怎么办 下一篇:为什么react要用专门的组件来渲染列表
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• react中redux有中间件吗• react调用setstate后发生了什么• react中canvas的用法是什么• react中怎么修改组件状态• react三种定义组件方法有什么区别
    1/1

    PHP中文网