React Router Dom中Redirect组件无法跳转到指定路径的问题

问题场景 #

点击按钮触发支付函数时，用户未登录就需要跳转到登录页。当前代码里history.push能正常工作，但返回Redirect组件却无效：

const PaymentMethod = ()=>{
        
      if(!isAuthenticated()) 
      {
           toast.error('Please signin to continue');
           history.push('/signin') // 正常生效
          // return <Redirect to = '/signin' /> // 不生效
           
      }
      
   }

// isAuthenticated 是判断用户是否登录的布尔函数

为什么Redirect不生效？ #

Redirect是React Router的组件，必须作为JSX被渲染到DOM中才会触发重定向逻辑。但你的PaymentMethod是一个事件处理函数（不是组件渲染函数），直接返回Redirect组件根本不会被React处理，自然起不到跳转作用。

而history.push是直接操作路由的历史栈，属于命令式的路由跳转，在事件函数里调用完全没问题，所以能正常工作。

解决办法 #

办法1：保留history.push（推荐） #

既然这个方式已经正常工作，没必要强行换Redirect，直接用就行，还能少改代码：

const PaymentMethod = ()=>{
      if(!isAuthenticated()) 
      {
           toast.error('请登录后继续');
           history.push('/signin');
      } else {
          // 这里写已登录后的支付逻辑
      }
   }

办法2：非要用Redirect？改成组件模式 #

如果坚持要用Redirect，得把逻辑改成组件形式，让Redirect能被渲染出来：

import { Redirect, useState } from 'react';

const PaymentButton = () => {
  const [needLogin, setNeedLogin] = useState(false);

  const handlePay = () => {
    if (!isAuthenticated()) {
      toast.error('请登录后继续');
      setNeedLogin(true);
    } else {
      // 执行支付流程
    }
  };

  // 如果需要登录，渲染Redirect组件触发跳转
  if (needLogin) {
    return <Redirect to="/signin" />;
  }

  return <button onClick={handlePay}>去支付</button>;
};

之后在页面里用<PaymentButton />代替原来的按钮即可。

内容的提问来源于stack exchange，提问作者Aakash Tiwari