如何在React Router Dom中正確實現受保護的路由？

如何使用react-router-dom建立受保護的路由？

問題

以下程式碼嘗試建立使用react-router-dom的React應用程式中的受保護路由：

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;

但是，此程式碼無法如預期般運作。即使用戶未登錄，也可以存取受保護的路由。

解

主要有兩個問題程式碼如下：

1. Switch 元件不處理除Route和Redirect 元件之外的任何渲染。如果您想要「嵌套」路由元件，則需要將每個路由元件包裝在一個路由元件中。
2. 登入元件不會將使用者重新導向回他們登入後嘗試存取的原始路由

這裡是修正了這兩個問題的程式碼版本：

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;

在此修正的程式碼：

1. 每個Route 元件都包裝在父Route 元件中。
2. Login 元件使用 Redirect 元件在使用者登入後將使用者重新導向到儀表板頁面。

以上是如何在React Router Dom中正確實現受保護的路由？的詳細內容。更多資訊請關注PHP中文網其他相關文章！