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 exact path="/About" component={About} />
          </>
        ) : (
          <Route path="/" component={Login} exact />
        )}

        <Route component={PageNotFound} />
      </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" /> : <Login />}
        </Route>
        <Route path="/dashboard">
          {authLogin ? <Dashboard /> : <Redirect to="/" />}
        </Route>

        <Route exact path="/About" component={About} />
        <Route component={PageNotFound} />
      </Switch>
    </BrowserRouter>
  );
}

export default Routes;

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

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

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