React类组件条件跳转触发无限循环报错，但功能仍正常

你这代码的问题出在每次组件渲染时都会执行路径判断并渲染<Navigate />，导航完成后组件会重新渲染，这个过程会被反复触发，直接导致无限循环。虽然表面上功能能用，但React的渲染机制会因为这种重复触发抛出警告，时间长了肯定会有性能问题。

别直接在BrowserRouter下面裸写<Navigate />，把重定向逻辑整合到路由配置里，用React Router自带的机制处理才对：

办法1：在Routes里配置重定向路由（最推荐） #

把重定向规则作为第一个路由项，匹配所有非根路径的请求直接跳转到主页：

import './App.scss';
import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import World from './components/World';
import Shop from './components/Shop';
import About from './components/About';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      query: ''
    };
  }

  render() {
    return (
      <BrowserRouter>
        <Routes>
          {/* 匹配所有非根路径，直接重定向到主页 */}
          <Route path="*" element={<Navigate to="/" replace />} />
          {/* 主页路由 */}
          <Route path="/" element={<div>这里是主页内容</div>} />
          {/* 其他你需要保留的路由 */}
          <Route path="/world" element={<World />} />
          <Route path="/shop" element={<Shop />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    );
  }
}

加个replace属性会替换历史记录里的当前条目，用户点返回按钮也不会回到之前的路径，能进一步避免循环。

办法2：结合组件内的路由状态判断（适配类组件） #

如果需要更灵活的条件（比如结合组件自己的state），可以用withRouter高阶组件拿到路由信息，别直接读window.location：

import './App.scss';
import React from 'react';
import { BrowserRouter, Routes, Route, Navigate, withRouter } from 'react-router-dom';
import World from './components/World';
import Shop from './components/Shop';
import About from './components/About';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      query: ''
    };
  }

  render() {
    const { location } = this.props;
    // 只在路径非根且没在重定向过程中时触发
    if (location.pathname !== '/' && !location.state?.isRedirecting) {
      return <Navigate to="/" replace state={{ isRedirecting: true }} />;
    }

    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<div>这里是主页内容</div>} />
          <Route path="/world" element={<World />} />
          <Route path="/shop" element={<Shop />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    );
  }
}

// 用withRouter包裹组件，注入路由相关的props
export default withRouter(App);

通过location.state标记重定向状态，防止重复触发导航。

• 尽量用React Router提供的location对象拿路径信息，别直接读window.location，前者是React路由状态的一部分，能和组件渲染周期同步。
• 重定向逻辑尽量放在路由配置里，符合React Router的设计规范，也能避免不必要的渲染循环。

内容的提问来源于stack exchange，提问作者Rik Verbeek