网站 系统设置,vs和sql怎么做网站,做古代风格头像的网站,常德网站开发哪家好React-router 实现最需要关注的就以下几方面#xff1a;
1. 路由值到视图的映射规则
2. 对于路由变更的监听
3. 路由操作方法
4. 路由记录存储与操作
1. BrowserRouter
浏览器路由实现#xff0c;最主要的两个概念是变更路由与监听路由变更。 History 是整个浏览器路由…React-router 实现最需要关注的就以下几方面
1. 路由值到视图的映射规则
2. 对于路由变更的监听
3. 路由操作方法
4. 路由记录存储与操作
1. BrowserRouter
浏览器路由实现最主要的两个概念是变更路由与监听路由变更。 History 是整个浏览器路由历史记录大对象其中包含长度等属性 Location 是单一页面所对应的资源定位对象我们可以理解为当页面跳转时先生成 Location然后将 Location push 到 History。 首先我们要明确几个概念
1. 历史操作。注意此操作不会触发 popState history.pushState history.replaceState
2. 监听变更 window.addEventListener(popstate, () {})
3. 操作。注意以下操作会触发 popState history.back() history.forward() history.go()
1.1. 创建Router
export function createBrowserRouter(routes: RouteObject[],opts?: DOMRouterOpts
): RemixRouter {return createRouter({basename: opts?.basename,future: {...opts?.future,v7_prependBasename: true,},history: createBrowserHistory({ window: opts?.window }),hydrationData: opts?.hydrationData || parseHydrationData(),routes,mapRouteProperties,}).initialize();
}
1.2. router下承载history
export function createBrowserHistory(options: BrowserHistoryOptions {}
): BrowserHistory {function createBrowserLocation(window: Window,globalHistory: Window[history]) {let { pathname, search, hash } window.location;return createLocation(,{ pathname, search, hash },(globalHistory.state globalHistory.state.usr) || null,(globalHistory.state globalHistory.state.key) || default);}function createBrowserHref(window: Window, to: To) {return typeof to string ? to : createPath(to);}return getUriBasedHistory(createBrowserLocation,createBrowserHref,null,options);
}
1.3. history 确定 location
function getUrlBasedHistory(getLocation: (window: Window, globalHistory: Window[history]) Location,createHref: (window: Window, to: To) string,validateLocation: ((location: Location, to: To) void) | null,options: UrlHistoryOptions {}
): UrlHistory {let { window document.defaultView!, v5Compat false } options;let globalHistory window.history;let action Action.Pop;let listener: Listener | null null;let index getIndex()!if (index null) {index 0;globalHistory.replaceState({ ...globalHistory.state, idx: index }, );}function getIndex(): number {let state globalHistory.state || { idx: null };return state.idx;}function handlePop() {action Action.Pop;let nextIndex getIndex();let delta nextIndex null ? null : nextIndex - index;index nextIndex;if (listener) {listener({ action, location: history.location, delta });}}function push(to: To, state?: any) {action Action.Push;let location createLocation(history.location, to, state);if (validateLocation) validateLocation(location, to);index getIndex() 1;let historyState getHistoryState(location, index);let url history.createHref(location);try {globalHistory.pushState(historyState, , url);} catch (error) {if (error instanceof DOMException error.name DataCloneError) {throw error;}window.location.assign(url);}if (v5Compat listener) {listener({ action, location: history.location, delta: 1 });}}function replace(to: To, state?: any) {action Action.Replace;let location createLocation(history.location, to, state);if (validateLocation) validateLocation(location, to);index getIndex();let historyState getHistoryState(location, index);let url history.createHref(location);globalHistory.replaceState(historyState, , url);if (v5Compat listener) {listener({ action, location: history.location, delta: 0 });}}function createURL(to: To): URL {let base window.location.origin ! null? window.location.origin: window.location.href;let href typeof to string ? to : createPath(to);invariant(base,No window.location.(origin|href) available to create URL for href: ${href}),return new URL(href, base);}let history: History {get action() {return action;},get location() {return getLocation(window, globalHistory);},listen(fn: Listener) {if (listener) {throw new Error(A history only accepts one active listener);}window.addEventListener(PopStateEventType, handlePop);listener fn;return () {window.removeEventListener(PopStateEventType, handlePop);listener null;};},createHref(to) {return createHref(window, to);},createURL,encodeLocation(to) {let url createURL(to);return {pathname: url.pathname,search: url.search,hash: url.hash,};},push,replace,go(n) {return globalHistory.go(n);},};return history;
}
1.4. 历史记录栈变更监听
事件处理解决后接下来就是解决监听我们上面提到监听 popState 以此来处理路由变更。
listen(fn: Listener) {if (listener) {throw new Error(A history only accepts one active listener);}window.addEventListener(PopStateEventType, handlePop);listener fn;return () {window.removeEventListener(PopStateEventType, handlePop);listener null;};
},
1.5. popState 逻辑处理
function handlePop() {action Action.Pop;let nextIndex getIndex()let delta nextIndex null ? null : nextIndex - indexindex nextIndexif (listener) {listener({ action, location: history.location, delta })}
}
2. MemoryRouter
内存型路由的上层实现与 BrowserRouter 类似或者说作者在设计之初就考虑了规范的对外统一接口协议你会发现在使用 React-router 时不管你用什么类型记录API 都是一样的这就是抽象封装的魅力。
2.1. 创建 router
export function createMemoryRouter(routes: RouteObject[],opts?: {basename?: string;future?: PartialOmitRouterFutureConfig, v7_prependBasename;hydrationData?: HydrationState;initialEntries?: InitialEntry[];initialIndex?: number;unstable_dataStrategy?: unstable_DataStrategyFunction;}
): RemixRouter {return createRouter({basename: opts?.basename,future: {...opts?.future,v7_prependBasename: true,},history: createMemoryHistory({initialEntries: opts?.initialEntries,initialIndex: opts?.initialIndex,}),hydrationData: opts?.hydrationData,routes,mapRouteProperties,unstable_dataStrategy: opts?.unstable_dataStrategy,}).initialize();
}
2.2. Router 下承载 history
export function createMemoryHistory(options: MemoryHistoryOptions {}
): MemoryHistory {let { initialEntries [/], initialIndex, v5Compat false } options;let entries: Location[]; // Declare so we can access from createMemoryLocationentries initialEntries.map((entry, index) createMemoryLocation(entry,typeof entry string ? null : entry.state,index 0 ? default : undefined));let index clampIndex(initialIndex null ? entries.length - 1 : initialIndex);let action Action.Pop;let listener: Listener | null null;function clampIndex(n: number): number {return Math.min(Math.max(n, 0), entries.length - 1);}function getCurrentLocation(): Location {return entries[index];}function createMemoryLocation(to: To,state: any null,key?: string): Location {let location createLocation(entries ? getCurrentLocation().pathname : /,to,state,key);warning(location.pathname.charAt(0) /,relative pathnames are not supported in memory history: ${JSON.stringify(to)});return location;}function createHref(to: To) {return typeof to string ? to : createPath(to);}let history: MemoryHistory {get index() {return index;},get action() {return action;},get location() {return getCurrentLocation();},createHref,createURL(to) {return new URL(createHref(to), http://localhost);},encodeLocation(to: To) {let path typeof to string ? parsePath(to) : to;return {pathname: path.pathname || ,search: path.search || ,hash: path.hash || ,};},push(to, state) {action Action.Push;let nextLocation createMemoryLocation(to, state);index 1;entries.splice(index, entries.length, nextLocation);if (v5Compat listener) {listener({ action, location: nextLocation, delta: 1 });}},replace(to, state) {action Action.Replace;let nextLocation createMemoryLocation(to, state);entries[index] nextLocation;if (v5Compat listener) {listener({ action, location: nextLocation, delta: 0 });}},go(delta) {action Action.Pop;let nextIndex clampIndex(index delta);let nextLocation entries[nextIndex];index nextIndex;if (listener) {listener({ action, location: nextLocation, delta });}},listen(fn: Listener) {listener fn;return () {listener null;};},};return history;
}
因为内存型路由跟浏览器历史记录没有关联因此相较于 BrowserRouter没有关于浏览器历史记录栈变更的监听只有单纯的记录压入和跳转。
重点关注
push(to, state) {action Action.Push;let nextLocation createMemoryLocation(to, state);index 1;entries.splice(index, entries.length, nextLocation);if (v5Compat listener) {listener({ action, location: nextLocation, delta: 1 });}
}
