React中已认证用户访问首页时重定向到Dashboard的实现问题

实现步骤 #

你只需要对首页路由增加已认证状态的重定向判断即可，这里提供两种适配不同场景的实现方案：

方案1：直接修改现有逻辑（适配当前简单项目结构） #

首先修改App.js文件，调整首页路由的渲染逻辑：

import React, { useState } from "react";
// 新增导入Redirect组件
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";
import Dashboard from "./Dashboard";
import Nav from "./Nav";

function App() {
  const [isAuth, setAuth] = useState(false);
  return (
    <Router>
      <Nav />
      <Switch>
        <Route exact path="/">
          {/* 增加认证状态判断 */}
          {isAuth ? 
            <Redirect to="/dashboard" /> : 
            <>
              <button onClick={() => setAuth(true)}>Login</button>
              <button onClick={() => setAuth(false)}>Logout</button>
            </>
          }
        </Route>

        <ProtectedRoute
          exact
          path="/dashboard"
          component={Dashboard}
          isAuth={isAuth}
        />
      </Switch>
    </Router>
  );
}

export default App;

改动逻辑说明：访问首页时先判断用户认证状态，已认证直接重定向到仪表盘页面，未认证才渲染登录、登出按钮，完全满足你需要的效果。

方案2：封装通用公开路由守卫（适配多公开页面的复杂场景） #

如果后续你还有登录页、注册页等多个仅未认证用户可访问的页面，可以封装和ProtectedRoute逻辑相反的公开路由守卫，复用性更高：

1. 新建PublicRoute.js文件：

import React from "react";
import { Route, Redirect } from "react-router-dom";
function PublicRoute({ isAuth, component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) => {
        if (!isAuth) {
          return <Component />;
        } else {
          return <Redirect to="/dashboard" />;
        }
      }}
    />
  );
}
export default PublicRoute;

2. 替换App.js里的首页路由为PublicRoute：

// 先把首页内容抽成单独的Home组件
const Home = ({setAuth}) => {
  return <>
    <button onClick={() => setAuth(true)}>Login</button>
    <button onClick={() => setAuth(false)}>Logout</button>
  </>
}

// 路由部分修改为
<PublicRoute
  exact
  path="/"
  isAuth={isAuth}
  component={(props) => <Home setAuth={setAuth} />}
/>

内容的提问来源于stack exchange，提问作者Puneet Biswas