この場所を見ているとわかります。

Window

Domドキュメントを含むウィンドウ...ドムは?

Document Object Model

ブラウザがHTMLページを認識するように階層化することで,ツリー構造のオブジェクトモデルを形成することが理解できる.
だから直接言いますか?これは私たちが知っているHTMLです.私たちはDomを通じてJSでHTMLのタグにアクセスして修正することができます.
戻ってきて...
JSコードのアクセス可能ウィンドウは、現在スクリプトが実行されているウィンドウを表します.これらの機能は、JSでブラウザの機能にアクセスして制御する場合に、「ウィンドウオブジェクト」(Browser Object Model)によって提供されます.

Window.location

Documentの場所に関する情報が含まれます.ローカルウィンドウから.locationを撮るとlocationに関する情報が表示されますまたここの重要な番組の一つであるpathnameは、コンテンツを表示または表示しません!pathnameには、最初/後のパスが含まれます.

再利用するルーティング

ページを表示するかどうかはpathnameによって異なります.パスが正しくない場合はnullで処理され、空白のページが表示されます.

// Route.tsx
import { ReactNode } from "react";

interface RouteProps {
  path: string;
  children: ReactNode;
}

const Route = ({ path, children }: RouteProps) => {
  return window.location.pathname === path ? <>{children}</> : null;
};

export default Route;

使用

      <Route path="/">
        <Component />
      </Route>
      <Route path="/blank">
        <Component />
      </Route>

空白ページの後の位置に移動します.
pathnameは空白に印刷されます.

ページ全体のリフレッシュを回避

aタグは、他のURLにリンク可能なハイパーリンクを作成する.また、hrefパスの新しいウィンドウをダウンロードするプロパティは、完全に再表示されます.

// Link 컴포넌트를 만들어주자. Link.tsx
import React, { MouseEvent, ReactNode } from "react";

interface LinkProps {
  href: string;
  children: ReactNode;
}

const Link = ({ href, children }: LinkProps) => {
    const onClick = (event: MouseEvent<HTMLAnchorElement>) => {
        event.preventDefault();
    }
  return <a href={href} onClick={onClick}>{children}</a>;
};

export default Link;

置換URL

ページロードなしで動的にコンテンツを変更できる場合、URLを変更する意味はありますか?これは、ユーザーが特定のページの場所をブックマークに追加し、再度アクセスすることを望んでいるためだけです.URLを手動で更新する方法はhistoryです.pushStateがあります.

// Link.tsx
const Link = ({ href, children }: LinkProps) => {
    const onClick = (event: MouseEvent<HTMLAnchorElement>) => {
        event.preventDefault();
        window.history.pushState({}, "", href)
      	console.log(window.location);
    }
  return <a href={href} onClick={onClick}>{children}</a>;
};

export default Link;

ログを撮り直しました.現在、Lcoationはローカル/blankとして確認されています.
pathnameももちろん/blankです.もちろん、ページはまだ変わっていません.コースだけ変更しました.

ルートURLが変更されたことを伝える

popstateイベントはwindow'sの履歴変更時に発生します.しかし、MDN PopStateEventではpopstateはpushState()を呼び出すことによって発生しない.だからね.PostateEventオブジェクトを直接生成します.コメントして実行すると、ページは移動しません.
popstateイベントオブジェクトを生成して割り当てる必要があります.イベントオブジェクトを作成した場合は、実行させる必要があります.

// Link.tsx
const Link = ({ href, children }: LinkProps) => {
    const onClick = (event: MouseEvent<HTMLAnchorElement>) => {
        event.preventDefault();
        window.history.pushState({}, "", href)
        const navEvent = new PopStateEvent('popstate');
    	window.dispatchEvent(navEvent);
      ...
      ...

今popstate事件が発生しました!Route.tsに移動し、popstateが発生したときにコールバック関数を登録します.

// Route.tsx
import { ReactNode, useEffect, useState } from "react";

interface RouteProps {
  path: string;
  children: ReactNode;
}

const Route = ({ path, children }: RouteProps) => {
  // URL 을 추적하고, 변경이 있을시 다시 그려준다.
  const [currentPath, setCurrentPath] = useState(window.location.pathname);

  useEffect(() => {
    const onLocationChange = () => {
      setCurrentPath(window.location.pathname);
    };

    // listen for popstate event
    window.addEventListener("popstate", onLocationChange);

    // clean up event listener
    return () => {
      window.removeEventListener("popstate", onLocationChange);
    };
  }, []);

  return currentPath === path ? <>{children}</> : null;
};

export default Route;

よくできています:)React-Routerも使ったことがあります.それよりもっと面白い時間です.以前は早く使いたかったので、簡単な使い方しか知らずに使ってしまったのでしょうか?アリスAIはコースを始めた.彼は、工事は手段と方法を問わず重要だと言った.いきなり言った言葉ですが、この文章を整理して感じた点だけです.