如何在React中用<Link>实现类似window.location的无刷新跳转？

替换window.location的无刷新跳转方案 #

你当前用window.location会触发页面全量刷新，根本没法做过渡动画。react-router-dom v6+提供了编程式导航能力，用useNavigate钩子就能在函数逻辑里实现单页应用的内部无刷新跳转：

1. 在组件中导入useNavigate：

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

2. 在组件内部初始化导航函数：

const navigate = useNavigate();

3. 修改你的handleGameOver函数，把window.location替换为navigate方法：

const handleGameOver = () => {
  if (health < 1) {
    navigate("/GameOverDied");
  } else if (fuel < 1) {
    navigate("/GameOverFuel");
  }
};

这样跳转完全是React内部的路由切换，不会刷新页面，接下来就可以无缝添加过渡动画了。

实现路由过渡动画 #

这里给你一个基于CSS+react-router核心API的轻量实现方案，适合游戏场景的页面切换动画：

1. 在路由根组件（比如App.js）中，用useLocation监听路由变化，控制动画状态：

import { Outlet, useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';

function App() {
  const location = useLocation();
  const [isTransitioning, setIsTransitioning] = useState(false);

  useEffect(() => {
    setIsTransitioning(true);
    // 定时器时长要和CSS动画时长一致
    const timer = setTimeout(() => setIsTransitioning(false), 500);
    return () => clearTimeout(timer);
  }, [location.pathname]);

  return (
    <div className={`page-container ${isTransitioning ? 'fade-out' : 'fade-in'}`}>
      <Outlet />
    </div>
  );
}

2. 编写对应的CSS动画样式：

.page-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: all 0.5s ease;
}

.fade-out {
  opacity: 0;
  transform: scale(0.9);
}

.fade-in {
  opacity: 1;
  transform: scale(1);
}

这样每次路由切换时，页面会先执行退场动画，再执行入场动画。如果需要更复杂的动画（比如不同结局页用不同切换效果），可以给每个页面组件添加自定义类名，或者用react-transition-group的CSSTransition组件包裹Outlet，实现更精细的动画控制。

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