React中IP地域拦截后Redirect组件无法重定向的问题

为啥<Redirect>不生效？ #

<Redirect>是React Router的组件，必须在React的渲染输出流程里才能触发路由跳转。你直接在jQuery的回调里写<Redirect push to="/home" />，只是创建了一个组件对象，但根本没将它纳入React的渲染逻辑中，自然不会生效。

为啥window.location会无限重定向？ #

你把IP检测代码写在App组件外部，每次App组件渲染（包括路由跳转到/home后，根组件App仍会重新执行外层代码），都会重新发起IP请求，请求返回后又跳转到/home，循环往复就导致了无限重定向。

正确实现方式 #

用React的状态和生命周期钩子处理检测逻辑，配合React Router的路由能力实现跳转，同时避免重复请求：

import './App.css';
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import { useState, useEffect } from 'react';
import Home from './Home';
import Login from './Login';

function App() {
  // 状态记录检测完成状态与拦截状态
  const [isChecked, setIsChecked] = useState(false);
  const [isBlocked, setIsBlocked] = useState(false);
  // 注意：ipdata返回英国的国家代码是GB，不是UK，已修正
  const blacklist = ['US', 'CA', 'GB', 'IN'];

  useEffect(() => {
    // 仅在组件挂载时执行一次IP检测
    fetch("https://api.ipdata.co?api-key=97173fac13f575130327fc00f93b12fe62ea33afb45930438111a4ea", {
      mode: 'cors'
    })
    .then(res => res.json())
    .then(response => {
      const countryCode = response.country_code;
      if (blacklist.includes(countryCode)) {
        setIsBlocked(true);
        alert('This content is not available at your location.');
      } else {
        alert("You're allowed to see this!");
      }
      setIsChecked(true);
    })
    .catch(err => {
      // 请求失败的兜底处理，默认允许访问
      console.error('IP检测失败:', err);
      setIsChecked(true);
    });
  }, []); // 空依赖数组确保仅执行一次

  // 检测未完成时显示加载状态，避免提前渲染页面
  if (!isChecked) {
    return <div>Loading...</div>;
  }

  return (
    <Router>
      <Switch>
        <Route exact path="/">
          {/* 在渲染流程中根据拦截状态决定跳转或显示登录页 */}
          {isBlocked ? <Redirect push to="/home" /> : <Login />}
        </Route>
        <Route exact path="/home" component={Home}/>
        <Redirect to="/"/>
      </Switch>
    </Router>
  );
}

export default App;

关键修改点 #

• 将IP检测逻辑移入useEffect，配合空依赖数组确保仅在组件挂载时执行一次，避免重复请求。
• 用useState记录检测状态，确保检测完成后再渲染路由内容，防止未检测完就显示页面。
• 在路由的渲染逻辑中根据拦截状态使用<Redirect>，让组件处于React渲染流程内，正常触发跳转。
• 修正了英国国家代码的错误（ipdata返回GB而非UK），保证拦截逻辑准确。

若坚持使用window.location跳转 #

需增加路径判断，避免重复跳转：

// 检测到被拦截时
if (window.location.pathname !== '/home') {
  window.location.href = '/home';
}

但这种方式会触发页面刷新，体验不如React Router的内部跳转，更推荐前者方案。

内容的提问来源于stack exchange，提问作者Mudit Dagar