React Router重定向实现及更新深度超限错误解决方案

Hey，我来帮你搞定这个问题！先拆解一下你遇到的错误，再一步步教你修复，顺便讲讲React Router正确实现重定向的姿势～

错误原因分析 #

你看到的“更新深度超出最大值”错误，核心是在render方法里无条件触发了重定向，形成了无限循环：

1. 当authListener检测到用户登录/登出时，会调用setState更新user状态
2. 组件重新render，此时根据user状态直接触发Redirect组件
3. 重定向会触发路由变化，导致组件再次render
4. 再次检测user状态，又触发Redirect，循环往复停不下来

React为了防止这种无限循环，会限制嵌套更新的次数，所以抛出了这个错误。

React Router实现页面重定向的正确方式 #

React Router提供了几种靠谱的重定向方案，能完美避开这种循环：

• 在Route的render属性里做条件判断：针对特定路径，根据登录状态决定渲染组件还是重定向
• 封装PrivateRoute组件：专门用来保护需要登录才能访问的页面，未登录时自动跳转到登录页
• 在componentDidUpdate中用history跳转：通过history.push()触发跳转，而不是用Redirect组件，避免在render阶段触发循环

你的代码修复方案 #

下面是针对你代码的具体修复，我们用条件路由渲染+PrivateRoute的方案，彻底解决循环问题：

1. 先封装一个PrivateRoute组件 #

这个组件专门用来保护私有路由，只有登录用户才能访问对应的页面：

import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, user, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => 
        // 如果用户已登录，渲染目标组件；否则重定向到登录页
        user ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

2. 修改App组件的路由配置 #

把原来那种无条件的Redirect删掉，换成针对每个路由的条件判断，同时用PrivateRoute保护需要登录的页面：

import React, { Component } from "react";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
import Login from "./component/auth/Login";
import HomeScreen from "./component/home-screen/HomeScreen";
import Landing from "./component/Landing"; // 假设你已经有这个组件
import Users from "./component/Users";
import UserDetail from "./component/UserDetail";
import Error from "./component/Error";

// 上面定义的PrivateRoute组件
const PrivateRoute = ({ component: Component, user, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => 
        user ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { user: null }; // 初始设为null，更准确反映未登录状态
  }

  componentDidMount() {
    this.authListener();
  }

  authListener() {
    firebase.auth().onAuthStateChanged(user => {
      // 直接更新user状态，不用额外判断，firebase会返回null或用户对象
      this.setState({ user });
    });
  }

  render() {
    const { user } = this.state;
    return (
      <BrowserRouter>
        <div className="App">
          <Switch>
            {/* 根路径：未登录显示Landing页面，已登录直接跳首页 */}
            <Route 
              exact path="/" 
              render={() => 
                user ? <Redirect to="/homescreen" /> : <Landing />
              } 
            />
            {/* 登录页：如果用户已经登录，访问/login时直接跳首页 */}
            <Route 
              exact path="/login" 
              render={(props) => 
                user ? <Redirect to="/homescreen" /> : <Login {...props} />
              } 
            />
            {/* 私有路由：只有登录用户才能访问这些页面 */}
            <PrivateRoute 
              exact path="/homescreen" 
              component={HomeScreen} 
              user={user} 
            />
            <PrivateRoute 
              exact path="/users" 
              component={Users} 
              user={user} 
            />
            <PrivateRoute 
              exact path="/users/:id" 
              component={UserDetail} 
              user={user} 
            />
            {/* 404错误页：匹配不到任何路由时显示 */}
            <Route component={Error} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

修复的关键要点 #

• 删掉了原来在Switch里的无条件Redirect，改成在每个需要校验的Route的render方法里做判断，避免每次render都触发重定向
• 用PrivateRoute统一管理所有需要登录的路由，代码更简洁，以后加新页面也方便
• 初始state把user设为null，原来的空对象{}会被JS判断为truthy，导致一开始就触发重定向，现在更准确
• 登录页加了已登录判断，避免已登录用户不小心进入登录页

内容的提问来源于stack exchange，提问作者Imran Ali