React Router Dom で保護されたルートを正しく実装するにはどうすればよいですか?

react-router-dom で保護されたルートを作成するには?

問題

次のコードは試行ですReact アプリケーションで保護されたルートを作成するには、react-router-dom:

import { useContext } from "react";
import { globalC } from "./context";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import About from "./About";
import Dashboard from "./Dashboard";
import Login from "./Login";
import PageNotFound from "./PageNotFound";

function Routes() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  return (
    <browserrouter>
      <switch>
        {authLogin ? (
          
            <route path="/dashboard" component="{Dashboard}" exact></route>
            <route exact path="/About" component="{About}"></route>
          >
        ) : (
          <route path="/" component="{Login}" exact></route>
        )}

        <route component="{PageNotFound}"></route>
      </switch>
    </browserrouter>
  );
}

export default Routes;

ただし、このコードは期待どおりに機能しません。ユーザーは、ログインしていなくても、保護されたルートにアクセスできます。

解決策

主な問題が 2 つあります。コード:

1. Switch コンポーネントは、ルートとリダイレクト以外のレンダリングを処理しません。コンポーネント。ルート コンポーネントを「ネスト」したい場合は、ルート コンポーネントでそれぞれをラップする必要があります。
2. ログイン コンポーネントは、ユーザーがログインした後にアクセスしようとしていた元のルートへのユーザーのリダイレクトを処理しません。 in.

これらの問題の両方を修正したコードの修正バージョンを次に示します。

import { useContext } from "react";
import { globalC } from "./context";
import { Route, Switch, BrowserRouter, Redirect } from "react-router-dom";
import About from "./About";
import Dashboard from "./Dashboard";
import Login from "./Login";
import PageNotFound from "./PageNotFound";

function Routes() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  return (
    <browserrouter>
      <switch>
        <route path="/" exact>
          {authLogin ? <redirect to="/dashboard"></redirect> : <login></login>}
        </route>
        <route path="/dashboard">
          {authLogin ? <dashboard></dashboard> : <redirect to="/"></redirect>}
        </route>

        <route exact path="/About" component="{About}"></route>
        <route component="{PageNotFound}"></route>
      </switch>
    </browserrouter>
  );
}

export default Routes;

Inこの修正されたコード:

1. 各 Route コンポーネントは親 Route コンポーネントでラップされています。
2. Login コンポーネントは、ログイン後にユーザーをダッシュ​​ボード ページにリダイレクトするために Redirect コンポーネントを使用します。 .

以上がReact Router Dom で保護されたルートを正しく実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。