React应用中如何仅从Games页面跳转时填充Analyze Game页面数据

不需要额外设置独立的跳转标识，直接使用React Router 原生提供的路由state传递机制即可实现需求，天然可区分页面访问来源。

1. Games 页面跳转逻辑 #

跳转时直接在路由state中携带标识和游戏数据即可：

React Router v6 写法 #

// Games 页面组件
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

function Games() {
  const navigate = useNavigate();
  // 示例：当前选中的游戏数据
  const [currentGame, setCurrentGame] = useState({
    gameId: '123',
    gameName: '示例游戏',
    gameType: 'RPG'
  });

  const handleMyButtonClick = () => {
    navigate('/analyze-game', {
      state: {
        fromGames: true,
        gameData: currentGame
      }
    });
  };

  return <button onClick={handleMyButtonClick}>分析该游戏</button>;
}

React Router v5 写法 #

// Games 页面组件
import { useHistory } from 'react-router-dom';
import { useState } from 'react';

function Games() {
  const history = useHistory();
  const [currentGame, setCurrentGame] = useState({
    gameId: '123',
    gameName: '示例游戏',
    gameType: 'RPG'
  });

  const handleMyButtonClick = () => {
    history.push({
      pathname: '/analyze-game',
      state: {
        fromGames: true,
        gameData: currentGame
      }
    });
  };

  return <button onClick={handleMyButtonClick}>分析该游戏</button>;
}

2. Analyze Game 页面数据填充逻辑 #

通过useLocation获取路由state，判断是否来自Games页面，再决定是用传递的数据还是初始化默认值：

// Analyze Game 页面组件
import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function AnalyzeGame() {
  const location = useLocation();
  // 默认初始化空表单，支持手动输入
  const [gameForm, setGameForm] = useState({
    gameId: '',
    gameName: '',
    gameType: ''
  });

  useEffect(() => {
    // 存在合法的跳转来源和数据时，自动填充表单
    if (location.state?.fromGames && location.state?.gameData) {
      setGameForm(location.state.gameData);
      // 可选：清空历史state，避免刷新页面重复填充，分享链接时也不会携带旧数据
      window.history.replaceState({}, document.title);
    }
  }, [location.state]);

  // 后续表单操作、分析逻辑省略
}

核心优势 #

• 天然区分访问来源：用户直接输入URL访问时location.state为undefined，自动走初始化逻辑，无需额外判断
• 数据不会暴露在URL中，不会污染路由链接，用户分享页面链接时其他人打开正常走手动输入流程
• 无需引入额外的全局状态管理、本地存储等方案，实现成本最低，逻辑最直观

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