使用react-router-dom的Redirect点击按钮无效果，无法跳转URL问题求助

• Redirect是声明式路由组件，仅当它被正常渲染到组件的JSX渲染树中时才会触发跳转逻辑，你在事件回调函数中返回该组件，并不会被插入到DOM结构中，因此不会生效
• 你的test函数存在语法错误：多写了一个闭合大括号}，实际运行会先触发语法报错
• Redirect本身是用于React Router管控的应用内路由跳转，不支持直接跳转到外部站地址

按跳转场景选择对应处理方式即可：

场景1：跳转应用内路由（React Router v5版本） #

方案1：使用命令式跳转APIuseHistory #

首先导入对应Hook：

import { useHistory } from 'react-router-dom';

组件内使用逻辑：

// 组件内先调用Hook获取history实例
const history = useHistory();

const test =  () => {
  // 传入应用内路由路径即可触发跳转，示例为跳转到/home
  history.push('/home');
};

// 按钮绑定逻辑无需修改
<Button variant="outline-success" onClick={() => test()}>Search</Button>

方案2：使用状态控制Redirect渲染 #

通过状态变量控制Redirect组件是否插入到渲染树中：

import { useState } from 'react';
import { Redirect } from 'react-router-dom';

// 组件内声明状态
const [shouldRedirect, setShouldRedirect] = useState(false);

const test = () => {
  setShouldRedirect(true);
};

// 组件渲染的JSX中加入Redirect判断逻辑
return (
  <>
    {shouldRedirect && <Redirect to="/home" />}
    <Button variant="outline-success" onClick={() => test()}>Search</Button>
  </>
)

场景2：跳转外部站地址 #

直接使用浏览器原生跳转API即可，不需要用到React Router的能力：

const test =  () => {
  // 当前页面跳转外部地址
  window.location.href = 'https://www.google.fr/';
  // 如果需要新标签页打开可以替换为下面的代码
  // window.open('https://www.google.fr/', '_blank');
};

如果你使用的是React Router v6版本，内置已经移除了Redirect组件和useHistory Hook，应用内命令式跳转统一使用useNavigate Hook：

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
// 跳转逻辑
navigate('/home');

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