12380网站建设打算,专业的网站制作团队,手机点了钓鱼网站怎么办,外网访问群晖wordpress问#xff1a;如果注册的路由特别多#xff0c;找到一个匹配项以后还会一直往下找#xff0c;我们想让react找到一个匹配项以后不再继续了#xff0c;怎么处理#xff1f;答#xff1a;Switch独特之处在于它只绘制子元素中第一个匹配的路由元素。 如果没有Sw…问如果注册的路由特别多找到一个匹配项以后还会一直往下找我们想让react找到一个匹配项以后不再继续了怎么处理答Switch独特之处在于它只绘制子元素中第一个匹配的路由元素。 如果没有Switch直接使用一堆Route则每个与当前路径匹配的Route都会被绘制
switch 作用 通常情况下path和component是一一对应的 Switch可以提高路由匹配效率单一匹配谁在前面先匹配谁 Switch独特之处在于它只绘制子元素中第一个匹配的路由元素。 如果没有Switch直接使用一堆Route则每个与当前路径匹配的Route都会被绘制 Switch 使用方法 Switch 手写代码实现
import React from react;
import matchPath from ./matchPath;
import RouterContext from ./RouterContext;
class Switch extends React.Component{static contextType RouterContext;render(){const {location} this.context;let element,match;React.Children.forEach(this.props.children,route{//一旦有一个匹配了后面的就不再匹配了if(!match React.isValidElement(route)){element route;match matchPath(location.pathname,route.props);}});return match?React.cloneElement(element,{computedMatch:match}):null;}
}
export default Switch;
