function App() { let element = useRoutes([ { path: "/", element:}, { path: "dashboard", element: }, { path: "invoices", element: , children: [ { path: ":id", element: }, { path: "sent", element:} ] }, { path: "*", element: } ]); return element; }

// 具体的 routes 对象是如何生成的, 下面的 Routes-createRoutesFromChildren 会讲到export function useRoutes( routes: RouteObject[], locationArg?: Partial | string ): React.ReactElement | null {let { matches: parentMatches } = React.useContext(RouteContext); let routeMatch = parentMatches[parentMatches.length - 1]; // 获取匹配的 routelet parentParams = routeMatch ? routeMatch.params : {}; let parentPathname = routeMatch ? routeMatch.pathname : "/"; let parentPathnameBase = routeMatch ? routeMatch.pathnameBase : "/"; let parentRoute = routeMatch && routeMatch.route; // 这里上面都是一些参数, 没有就是默认值//等于 React.useContext(LocationContext).location, 约等于原生的 location let locationFromContext = useLocation(); let location; if (locationArg) { // 对于配置项参数的一些判断 let parsedLocationArg = typeof locationArg === "string" ? parsePath(locationArg) : locationArg; location = parsedLocationArg; } else { location = locationFromContext; } // 如果参数里有则使用参数里的, 如果没有使用 context 的let pathname = location.pathname || "/"; let remainingPathname = parentPathnameBase === "/" ? pathname : pathname.slice(parentPathnameBase.length) || "/"; // matchRoutes 大概的作用是通过pathname遍历寻找,匹配到的路由具体源码放在下面讲 let matches = matchRoutes(routes, { pathname: remainingPathname }); // 最后调用渲染函数首先对数据进行 map // joinPaths的作用约等于 paths.join("/") 并且去除多余的斜杠 return _renderMatches( matches && matches.map(match => Object.assign({}, match, { params: Object.assign({}, parentParams, match.params), pathname: joinPaths([parentPathnameBase, match.pathname]), pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : joinPaths([parentPathnameBase, match.pathnameBase]) }) ), parentMatches ); }

function matchRoutes( routes: RouteObject[], locationArg: Partial | string, basename = "/" ): RouteMatch[] | null { let location = typeof locationArg === "string" ? parsePath(locationArg) : locationArg; // 获取排除 basename 的 pathname let pathname = stripBasename(location.pathname || "/", basename); if (pathname == null) { return null; }// flattenRoutes 函数的主要作用, 压平 routes, 方便遍历 // 源码见下方 let branches = flattenRoutes(routes); // 对路由进行排序 // rankRouteBranches 源码见下方 rankRouteBranches(branches); // 筛选出匹配到的路由 matchRouteBranch源码在下面讲 let matches = null; for (let i = 0; matches == null && i < branches.length; ++i) { matches = matchRouteBranch(branches[i], pathname); }return matches; }

function stripBasename(pathname: string, basename: string): string | null { if (basename === "/") return pathname; if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) { return null; }let nextChar = pathname.charAt(basename.length); if (nextChar && nextChar !== "/") { return null; }return pathname.slice(basename.length) || "/"; }

function flattenRoutes( routes: RouteObject[], branches: RouteBranch[] = [], parentsMeta: RouteMeta[] = [], parentPath = "" ): RouteBranch[] { routes.forEach((route, index) => { let meta: RouteMeta = { relativePath: route.path || "", caseSensitive: route.caseSensitive === true, childrenIndex: index, route }; if (meta.relativePath.startsWith("/")) { meta.relativePath = meta.relativePath.slice(parentPath.length); }// joinPaths 源码: (paths)=>paths.join("/").replace(/\/\/+/g, "/") // 把数组转成字符串, 并且清除重复斜杠 let path = joinPaths([parentPath, meta.relativePath]); let routesMeta = parentsMeta.concat(meta); // 如果有子路由则递归 if (route.children && route.children.length > 0) { flattenRoutes(route.children, branches, routesMeta, path); }// 匹配不到就 return if (route.path == null && !route.index) { return; } // 压平后组件添加的对象, TODO computeScore branches.push({ path, score: computeScore(path, route.index), routesMeta }); }); return branches; }

function rankRouteBranches(branches: RouteBranch[]): void { branches.sort((a, b) => a.score !== b.score ? b.score - a.score // Higher score first : compareIndexes( a.routesMeta.map(meta => meta.childrenIndex), b.routesMeta.map(meta => meta.childrenIndex) ) ); }

function matchRouteBranch( branch: RouteBranch, pathname: string ): RouteMatch[] | null { let { routesMeta } = branch; let matchedParams = {}; let matchedPathname = "/"; let matches: RouteMatch[] = []; //routesMeta 详细来源可以查看 上面的flattenRoutes for (let i = 0; i < routesMeta.length; ++i) { let meta = routesMeta[i]; let end = i === routesMeta.length - 1; let remainingPathname = matchedPathname === "/" ? pathname : pathname.slice(matchedPathname.length) || "/"; // 比较, matchPath 源码在下方 let match = matchPath( { path: meta.relativePath, caseSensitive: meta.caseSensitive, end }, remainingPathname ); // 如果返回是空 则直接返回 if (!match) return null; // 更换对象源 Object.assign(matchedParams, match.params); let route = meta.route; // push 到最终结果上, joinPaths 不再赘述 matches.push({ params: matchedParams, pathname: joinPaths([matchedPathname, match.pathname]), pathnameBase: joinPaths([matchedPathname, match.pathnameBase]), route }); if (match.pathnameBase !== "/") { matchedPathname = joinPaths([matchedPathname, match.pathnameBase]); } }return matches; }

export function matchPath< ParamKey extends ParamParseKey, Path extends string >( pattern: PathPattern | Path, pathname: string ): PathMatch | null { // pattern 的重新赋值 if (typeof pattern === "string") { pattern = { path: pattern, caseSensitive: false, end: true }; }// 通过正则匹配返回匹配到的正则表达式matcher 为 RegExp let [matcher, paramNames] = compilePath( pattern.path, pattern.caseSensitive, pattern.end ); // 正则对象的 match 方法 let match = pathname.match(matcher); if (!match) return null; // 取 match 到的值 let matchedPathname = match[0]; let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1"); let captureGroups = match.slice(1); // params 转成对象{ param:value, ... } let params: Params = paramNames.reduce( (memo, paramName, index) => { // 如果是*号转换 if (paramName === "*") { let splatValue = https://www.it610.com/article/captureGroups[index] ||""; pathnameBase = matchedPathname .slice(0, matchedPathname.length - splatValue.length) .replace(/(.)\/+$/, "$1"); }// safelyDecodeURIComponent等于 decodeURIComponent + try_catch memo[paramName] = safelyDecodeURIComponent( captureGroups[index] || "", paramName ); return memo; }, {} ); return { params, pathname: matchedPathname, pathnameBase, pattern }; }

function compilePath( path: string, caseSensitive = false, end = true ): [RegExp, string[]] { let paramNames: string[] = []; // 正则匹配替换 let regexpSource = "^" + path // 忽略尾随的 / 和 /* .replace(/\/*\*?$/, "") // 确保以 / 开头 .replace(/^\/*/, "/") // 转义特殊字符 .replace(/[\\.*+^$?{}|()[\]]/g, "\\$&") // Escape special regex chars .replace(/:(\w+)/g, (_: string, paramName: string) => { paramNames.push(paramName); return "([^\\/]+)"; }); // 对于*号的特别判断 if (path.endsWith("*")) { paramNames.push("*"); regexpSource += path === "*" || path === "/*" ? "(.*)$" // Already matched the initial /, just match the rest : "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"] } else { regexpSource += end ? "\\/*$" // 匹配到末尾时，忽略尾部斜杠 : "(?:\\b|\\/|$)"; }let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i"); // 返回匹配结果 return [matcher, paramNames]; }

function _renderMatches( matches: RouteMatch[] | null, parentMatches: RouteMatch[] = [] ): React.ReactElement | null {if (matches == null) return null; // 通过 context 传递数据 return matches.reduceRight((outlet, match, index) => { return ( } value=https://www.it610.com/article/{{ outlet, matches: parentMatches.concat(matches.slice(0, index + 1)) }} /> ); }, null as React.ReactElement | null); }

export function Router({ basename: basenameProp = "/", children = null, location: locationProp, navigationType = NavigationType.Pop, navigator, static: staticProp = false }: RouterProps): React.ReactElement | null {// 格式化 baseName let basename = normalizePathname(basenameProp); // memo context value let navigationContext = React.useMemo( () => ({ basename, navigator, static: staticProp }), [basename, navigator, staticProp] ); // 如果是字符串则解析根据 #, ? 特殊符号解析 url if (typeof locationProp === "string") { locationProp = parsePath(locationProp); }let { pathname = "/", search = "", hash = "", state = null, key = "default" } = locationProp; // 同样的缓存 let location = React.useMemo(() => { // 这还方法在 useRoutes-matchRoutes-stripBasename 讲过这里就不多说 let trailingPathname = stripBasename(pathname, basename); if (trailingPathname == null) { return null; }return { pathname: trailingPathname, search, hash, state, key }; }, [basename, pathname, search, hash, state, key]); // 空值判断 if (location == null) { return null; }// 提供 context 的 provider, 传递 children return ( ); }

function parsePath(path: string): Partial { let parsedPath: Partial = {}; // 首先确定 path if (path) { // 是否有#号 , 如果有则截取 let hashIndex = path.indexOf('#'); if (hashIndex >= 0) { parsedPath.hash = path.substr(hashIndex); path = path.substr(0, hashIndex); }// 再判断 ? , 有也截取 let searchIndex = path.indexOf('?'); if (searchIndex >= 0) { parsedPath.search = path.substr(searchIndex); path = path.substr(0, searchIndex); }// 最后就是 path if (path) { parsedPath.pathname = path; } } // 返回结果 return parsedPath; }

function Routes({ children, location }: RoutesProps): React.ReactElement | null { return useRoutes(createRoutesFromChildren(children), location); }

function createRoutesFromChildren( children: React.ReactNode ): RouteObject[] { let routes: RouteObject[] = []; // 使用官方函数循环 React.Children.forEach(children, element => { if (element.type === React.Fragment) { // 如果是 React.Fragment 组件 则直接push 递归函数 routes.push.apply( routes, createRoutesFromChildren(element.props.children) ); return; }let route: RouteObject = { caseSensitive: element.props.caseSensitive, element: element.props.element, index: element.props.index, path: element.props.path }; // route 对象具有的属性// 同样地递归 if (element.props.children) { route.children = createRoutesFromChildren(element.props.children); }routes.push(route); }); return routes; }

export function useHref(to: To): string { let { basename, navigator } = React.useContext(NavigationContext); // useResolvedPath 在上面讲过 let { hash, pathname, search } = useResolvedPath(to); let joinedPathname = pathname; if (basename !== "/") { let toPathname = getToPathname(to); let endsWithSlash = toPathname != null && toPathname.endsWith("/"); joinedPathname = pathname === "/" ? basename + (endsWithSlash ? "/" : "") : joinPaths([basename, pathname]); }// 可以看做, 路由的拼接, 包括 ? , # return navigator.createHref({ pathname: joinedPathname, search, hash }); }

function resolveTo( toArg: To, routePathnames: string[], locationPathname: string ): Path { // parsePath上面已经分析过了 let to = typeof toArg === "string" ? parsePath(toArg) : toArg; let toPathname = toArg === "" || to.pathname === "" ? "/" : to.pathname; let from: string; if (toPathname == null) { from = locationPathname; } else { let routePathnameIndex = routePathnames.length - 1; // 如果以 .. 开始的路径 if (toPathname.startsWith("..")) { let toSegments = toPathname.split("/"); // 去除 .. while (toSegments[0] === "..") { toSegments.shift(); routePathnameIndex -= 1; }to.pathname = toSegments.join("/"); }// from 复制 from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/"; }// 解析, 返回对象 let path = resolvePath(to, from); if ( toPathname && toPathname !== "/" && toPathname.endsWith("/") && !path.pathname.endsWith("/") ) { path.pathname += "/"; } // 确保加上末尾 /return path; }

function resolvePath(to: To, fromPathname = "/"): Path { let { pathname: toPathname, search = "", hash = "" } = typeof to === "string" ? parsePath(to) : to; let pathname = toPathname ? toPathname.startsWith("/") ? toPathname // resolvePathname : resolvePathname(toPathname, fromPathname) : fromPathname; return { pathname, search: normalizeSearch(search), hash: normalizeHash(hash) }; }

function resolvePathname(relativePath: string, fromPathname: string): string { // 去除末尾斜杠, 再以斜杠分割成数组 let segments = fromPathname.replace(/\/+$/, "").split("/"); let relativeSegments = relativePath.split("/"); relativeSegments.forEach(segment => { if (segment === "..") { // 移除 .. if (segments.length > 1) segments.pop(); } else if (segment !== ".") { segments.push(segment); } }); return segments.length > 1 ? segments.join("/") : "/"; }

function useLocation(): Location { // 只是获取 context 中的数据 return React.useContext(LocationContext).location; }

function useNavigationType(): NavigationType { return React.useContext(LocationContext).navigationType; }

function useMatch< ParamKey extends ParamParseKey, Path extends string >(pattern: PathPattern | Path): PathMatch | null { // 获取 location.pathname let { pathname } = useLocation(); // matchPath在 useRoutes-matchRoutes-matchRouteBranch-matchPath 中讲到过 // 对一个URL路径名进行模式匹配，并返回有关匹配的信息。 return React.useMemo( () => matchPath(pattern, pathname), [pathname, pattern] ); }

function useNavigate(): NavigateFunction { // 从 context 获取数据 let { basename, navigator } = React.useContext(NavigationContext); let { matches } = React.useContext(RouteContext); let { pathname: locationPathname } = useLocation(); // 转成 json, 方便 memo 对比 let routePathnamesJson = JSON.stringify( matches.map(match => match.pathnameBase) ); let activeRef = React.useRef(false); React.useEffect(() => { activeRef.current = true; }); // 控制渲染, 需要在渲染完毕一次后操作// 路由操作函数 let navigate: NavigateFunction = React.useCallback( (to: To | number, options: NavigateOptions = {}) => { if (!activeRef.current) return; // 控制渲染 // 如果 go 是数字, 则结果类似于 go 方法 if (typeof to === "number") { navigator.go(to); return; } // 解析go let path = resolveTo( to, JSON.parse(routePathnamesJson), locationPathname ); if (basename !== "/") { path.pathname = joinPaths([basename, path.pathname]); } // 这一块 就是 前一个括号产生函数, 后一个括号传递参数 // 小小地转换下: // !!options.replace ? //navigator.replace( //path, //options.state //) //: navigator.push( //path, //options.state //) // (!!options.replace ? navigator.replace : navigator.push)( path, options.state ); }, [basename, navigator, routePathnamesJson, locationPathname] ); // 最后返回 return navigate; }

function generatePath(path: string, params: Params = {}): string { return path .replace(/:(\w+)/g, (_, key) => { return params[key]!; }) .replace(/\/*\*$/, _ => params["*"] == null ? "" : params["*"].replace(/^\/*/, "/") ); }

generatePath("/users/:id", { id: 42 }); // "/users/42" generatePath("/files/:type/*", { type: "img", "*": "cat.jpg" }); // "/files/img/cat.jpg"

• https://reactrouter.com/docs/...
• https://github.com/remix-run/...
• https://github.com/remix-run/...

推荐阅读

• 

  色母片是什么
• 

  mysql怎么查找递归 sql实现mysql递归查询
• 

  java数组基础详解
• 

  宝宝|婴幼儿意外伤害第一时间如何正确处置？
• 

  mysql服务层中解析器包含哪些功能 mysql解析器是什么
• 

  别出心裁的“烧南北”
• 

  真机|小米又站起来了！MIX 4真机屏幕曝光：这效果太好
• 

  水果拼盘常用水果 三种水果拼盘图片
• 

  品质分析方法,统计学分析方法有哪些
• 

  2023年北京郁金香文化节有几个展区参加 2023年北京郁金香文化节有几个展区
• 

  拍摄延时摄影用什么格式，延时摄影的图片格式
• 

  htcG13手机应该下个什么文件阅读器或者浏览器？一打开爱奇艺就自动把视频 图片查看器 音乐播放器全改成了爱奇艺万能播放器，
• 

  轻轨是地铁吗
• 

  mysql解压tar
• 

  百度导航下载导航，百度地图导航下载
• 

  go语言控制台输出 go语言控制台输入
• 

  预算在1500,如何配置一台玩DNF的电脑？
• 

  破晓色是什么颜色？
• 

  工程竣工验收需要哪些资料？ 工程竣工验收需要哪些资料
• 

  比亚迪s7报价多少 比亚迪s7报价多少?

• 考研英语阅读终极解决方案——阅读理解如何巧拿高分
• Ⅴ爱阅读，亲子互动——打卡第178天
• 上班后阅读开始变成一件奢侈的事
• 历史教学书籍
• 绘本讲师训练营【24期】14/21阅读原创《小黑鱼》
• 21天|21天|M&M《见识》04
• 绘本讲师训练营7期9/21阅读原创《蜗牛屋|绘本讲师训练营7期9/21阅读原创《蜗牛屋 》
• 桂妃研读社|桂妃研读社|D124|如何有效阅读一本书 Day1
• Android事件传递源码分析
• 4.23世界阅读日，樊登读书狂欢放送，听书中成长