React Router Dom에서 보호된 경로를 올바르게 구현하는 방법은 무엇입니까?

react-router-dom으로 보호 경로를 만드는 방법은 무엇입니까?

문제

다음 코드는 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;

을 사용하여 React 애플리케이션의 보호된 경로 그러나 이 코드는 예상대로 작동하지 않습니다. 사용자는 로그인하지 않아도 보호된 경로에 접근할 수 있습니다.

해결 방법

두 가지 주요 문제가 있습니다. 코드 사용:

1. Switch 구성 요소는 Route 및 Redirect 구성 요소 이외의 렌더링을 처리하지 않습니다. 라우팅 구성 요소를 "중첩"하려면 각 구성 요소를 Route 구성 요소로 래핑해야 합니다.
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;

여기 수정된 코드:

1. 각 Route 구성 요소는 상위 Route 구성 요소로 래핑됩니다.
2. 로그인 구성 요소는 사용자가 로그인한 후 Redirect 구성 요소를 사용하여 사용자를 대시보드 페이지로 리디렉션합니다.

위 내용은 React Router Dom에서 보호된 경로를 올바르게 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!