如何在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中文网其他相关文章！