ルーティングと不活性ロード

25872 ワード
lazy PrivateRoute PublicRoute Suspense テキストリンク

ワッフルカードサービスが気になるなら!
ワッフルカードの表示サービス:https://waffle-card.com/
ワッフル寄宿センター見学:https://github.com/waffle-card
登録の有無に応じてルーティングを処理する
ワッフルカードのサービスでは、ページが大きく3種類に分かれています.
アクセスするには
  • ログインが必要なページ
  • 私のページ
  • ログイン時にアクセスすべきでないページ
  • 登録ページ、会員登録ページ
  • 無制限アクセスページ
  • ホームページ、404ページ、ガイドページ
    • 登録の有無に応じてページルーティングを処理するために、PrivateRoute、PublicRouteルーティングコンポーネントが実現される.PrivateRoute

  • ログインのみでアクセスできるページルーティング.

  • パラメータにルーティングされるページコンポーネントを渡します.

  • ユーザのグローバル状態に応じて,ログイン時にパラメータとして渡されるページにルーティングする.

  • ログインしていない場合は、ログインページにルーティングします.
    • const PrivateRoute = ({
  component: Component,
}: PrivateRouteProps): JSX.Element => {
  const userInfo = useRecoilValue(userState);

  return userInfo ? <Component /> : <Navigate replace to="/login" />;
};
    PublicRoute
  • は、制約なしにアクセス可能なページをルーティングする.
  • パラメータにルーティングされるページコンポーネントを渡し、制限されたオプションを渡すことができる.
  • 制限であれば、ログイン状態でアクセスすべきでないページをルーティング処理する.
  • ユーザのグローバル状態に従ってログインし、ホームページにルーティングする.
    • const PublicRoute = ({
  component: Component,
  restricted,
}: PublicRouteProps): JSX.Element => {
  const userInfo = useRecoilValue(userState);

  return userInfo && restricted ? <Navigate replace to="/" /> : <Component />;
};
    Router
    // in Router.tsx

const Router = () => {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/" element={<PublicRoute component={HomePage} />} />
        <Route
          path="/login"
          element={<PublicRoute restricted component={LoginPage} />}
        />
        <Route
          path="/signup"
          element={<PublicRoute restricted component={SignUpPage} />}
        />
        <Route path="/my-page" element={<PrivateRoute component={MyPage} />} />
        <Route path="/guide" element={<PublicRoute component={GuidePage} />} />
        <Route path="*" element={<PublicRoute component={NotFoundPage} />} />
      </Routes>
    </Suspense>
  );
};
    上記実現したルーティング素子をルータ素子に分離してルーティング処理を行う.
    コードの印刷とロードの遅延
    React.Lazyを使用してページコンポーネントコードをジャンプし、必要に応じてロードするようにしました.現在、ワッフルカードのバンドルバッグの大きさは現在の業界に比べて小さいが、明らかな性能効果は見られない可能性がある.
    しかし、初期ロードで必ずしもアクセスしなくてもよいページは非効率的で、不完全ではありますが、初期ロード速度は必ず改善されると思います.
    上記のRouterコードは、次のようにSuspenceとLazyを使用して遅延ロードされます.
    const HomePage = lazy(() => import('@/pages/HomePage/index'));
const LoginPage = lazy(() => import('@/pages/LoginPage/index'));
const SignUpPage = lazy(() => import('@/pages/SignUpPage/index'));
const MyPage = lazy(() => import('@/pages/MyPage/index'));
const GuidePage = lazy(() => import('@/pages/GuidePage/index'));
const NotFoundPage = lazy(() => import('@/pages/NotFoundPage/index'));

const Router = () => {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/" element={<PublicRoute component={HomePage} />} />
        <Route
          path="/login"
          element={<PublicRoute restricted component={LoginPage} />}
        />
        <Route
          path="/signup"
          element={<PublicRoute restricted component={SignUpPage} />}
        />
        <Route path="/my-page" element={<PrivateRoute component={MyPage} />} />
        <Route path="/guide" element={<PublicRoute component={GuidePage} />} />
        <Route path="*" element={<PublicRoute component={NotFoundPage} />} />
      </Routes>
    </Suspense>
  );
};
    GPG暗号化をどのように適用すれば、お客様の情報セキュリティを安心させることができます(6)