四月八日

function createBrowserLocation() {
    return let history: History = {
    get action() {
      return action;
    },
    get location() {
      return getLocation(window, globalHistory);
    },
    listen(fn: 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);
    },
}

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);

  /// ios 有 100条 pushState 的限制
  try {
    globalHistory.pushState(historyState, "", url);
  } catch (error) {
    if (error instanceof DOMException && error.name === "DataCloneError") {
      throw error;
    }
    window.location.assign(url);
  }
}

export function createMemoryHistory(
  options: MemoryHistoryOptions = {}
): MemoryHistory {
  let { initialEntries = ["/"], initialIndex, v5Compat = false } = options;
  let entries: Location[]; // Declare so we can access from createMemoryLocation
  entries = 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;
}

async function navigate(
  to: number | To | null,
  opts?: RouterNavigateOptions
): Promise<void> {
  // 传入数字特殊处理，相当于 history.go
  if (typeof to === "number") {
    init.history.go(to);
    return;
  }

  // 根据参数创建将要导航的地址
  // {pathname: '/test', search: '', hash: '', state: null, key: 'h5jaikrx'}
  nextLocation = {
    ...nextLocation,
    ...init.history.encodeLocation(nextLocation),
  };

  // 记录滚动条的位置
  saveScrollPosition(state.location, state.matches);

  // 找出匹配了哪些路由
  let matched = matchRoutes(routesToUse, location, basename);

  // 处理 lazy 属性
  let loadRouteDefinitionsPromises = matches.map((m) =>
    m.route.lazy
      ? loadLazyRouteModule(m.route, mapRouteProperties, manifest)
      : undefined
  );

  // 处理路由中需要请求的数据
  let results = await dataStrategyImpl({
    matches: dsMatches,
    request,
    params: matches[0].params,
    fetcherKey,
    context: requestContext,
  });

  // 如果 loader 返回 redirect
  let redirect = findRedirect(loaderResults);
  if (redirect) {
    await startRedirectNavigation(request, redirect.result, true, {
      replace,
    });
    return { shortCircuited: true };
  }

  // 更新内部状态，执行 subscribers 添加的监听方法
  updateState();
  // 获取到数据，pushState 提交导航
  if (pendingAction === HistoryAction.Push) {
    init.history.push(location, location.state);
  }
}

export function RouterProvider({
  fallbackElement,
  router,
  future,
}: RouterProviderProps): React.ReactElement {
  let [state, setStateImpl] = React.useState(router.state);

  let setState = React.useCallback<RouterSubscriber>(
    (newState: RouterState) => {
      setStateImpl(newState);
    },
    [setStateImpl]
  );

  // 导航结束会触发更新
  React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);

  let navigator = React.useMemo((): Navigator => {
    return {
      //...
    };
  }, [router]);

  let basename = router.basename || "/";

  let dataRouterContext = React.useMemo(
    () => ({
      router,
      navigator,
      static: false,
      basename,
    }),
    [router, navigator, basename]
  );

  return (
    <>
      <DataRouterContext.Provider value={dataRouterContext}>
        <DataRouterStateContext.Provider value={state}>
          <Router
            basename={basename}
            location={state.location}
            navigationType={state.historyAction}
            navigator={navigator}
          >
            {state.initialized || router.future.v7_partialHydration ? (
              <DataRoutes
                routes={router.routes}
                future={router.future}
                state={state}
              />
            ) : (
              fallbackElement
            )}
          </Router>
        </DataRouterStateContext.Provider>
      </DataRouterContext.Provider>
      {null}
    </>
  );
}

if (dataRouterState && future && future.v7_partialHydration) {
  for (let i = 0; i < renderedMatches.length; i++) {
    let match = renderedMatches[i];
    if (match.route.HydrateFallback || match.route.hydrateFallbackElement) {
      fallbackIndex = i;
    }

    if (match.route.id) {
      let { loaderData, errors } = dataRouterState;
      let needsToRunLoader =
        match.route.loader &&
        loaderData[match.route.id] === undefined &&
        (!errors || errors[match.route.id] === undefined);
      if (match.route.lazy || needsToRunLoader) {
        renderFallback = true;
        if (fallbackIndex >= 0) {
          renderedMatches = renderedMatches.slice(0, fallbackIndex + 1);
        } else {
          renderedMatches = [renderedMatches[0]];
        }
        break;
      }
    }
  }
}

return renderedMatches.reduceRight((outlet, match, index) => {
    let error: any;
    let shouldRenderHydrateFallback = false;
    let errorElement: React.ReactNode | null = null;
    let hydrateFallbackElement: React.ReactNode | null = null;
    let matches = parentMatches.concat(renderedMatches.slice(0, index + 1));
    let getChildren = () => {
      let children: React.ReactNode;
      if (error) {
        children = errorElement;
      } else if (shouldRenderHydrateFallback) {
        children = hydrateFallbackElement;
      } else if (match.route.Component) {
        children = <match.route.Component />;
      } else if (match.route.element) {
        children = match.route.element;
      } else {
        children = outlet;
      }
      return (
        <RenderedRoute
          match={match}
          routeContext={{
            outlet,
            matches,
            isDataRoute: dataRouterState != null,
          }}
          children={children}
        />
      );
    };
}

function App() {
  return (
    <BrowserRouter basename="/app">
      <Routes>
        <Route path="/" /> {/* 👈 Renders at /app/ */}
      </Routes>
    </BrowserRouter>
  );
}

export function Routes({
  children,
  location,
}: RoutesProps): React.ReactElement | null {
  function createRoutesFromChildren(children) {
    let routes: RouteObject[] = [];
    React.Children.forEach(children, (element, index) => {
      if (!React.isValidElement(element)) {
        return;
      }

      let treePath = [...parentPath, index];

      let route: RouteObject = {};

      if (element.props.children) {
        route.children = createRoutesFromChildren(
          element.props.children,
          treePath
        );
      }

      routes.push(route);
    });

    return routes;
  }
  return useRoutes(createRoutesFromChildren(children));
}