react-router-dom@5.3.0点击按钮无法跳转路由问题求助

你的代码核心错误是react-router-dom的Link组件用法不符合规范：
Link是需要直接渲染到JSX树的React组件，不能在onClick事件的回调函数中返回。你点击按钮后回调里返回的Link组件没有被挂载到DOM，自然不会触发路由跳转。

方案1：直接用Link包裹可点击区域（最推荐） #

直接把点击元素替换为Link组件，不需要额外写onClick事件，符合Link的设计用法，修改后的FloatingButton代码如下：

import { Link } from "react-router-dom";
import { IoMdAdd } from 'react-icons/io'; // 注意你用到的图标也要记得导入

const FloatingButton = () => {
    return (
        <div className="floatingButton">
            {/* 直接用Link包裹点击区域，to属性指定跳转路径 */}
            <Link to="/addData" className="addFloat">
                <IoMdAdd color={"white"} size={"20px"}/>
            </Link>
        </div>
    );
}

export default FloatingButton;

方案2：用编程式导航触发跳转（适用于跳转前需要执行额外逻辑的场景） #

如果点击按钮后需要先做校验、数据处理等操作再跳转，可以用v5版本提供的useHistoryHook实现编程式跳转：

import { useHistory } from "react-router-dom";
import { IoMdAdd } from 'react-icons/io';

const FloatingButton = () => {
    const history = useHistory();

    const addScreen = () => {
        // 这里可以加跳转前的逻辑，比如表单校验、数据上报等
        console.log("Clicked");
        history.push("/addData"); // 调用push方法跳转
    }

    return (
        <div className="floatingButton">
            <div className="addFloat" onClick={addScreen}>
                <IoMdAdd color={"white"} size={"20px"}/>
            </div>
        </div>
    );
}

export default FloatingButton;

• 你的App.js中的路由配置没有问题，不需要修改
• 确保FloatingButton组件是在Router的包裹范围内使用（也就是在你配置的路由对应的页面组件内渲染，你现在把MainScreen配在根路由，只要MainScreen里用了FloatingButton就满足要求）

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