React路由组件传值问题：如何将SelectTheMode的selectedArray传给Game

方案1：通过路由参数传递 #

• 在SelectTheMode组件跳转时，把数组转成JSON字符串作为路由参数传递：

// SelectTheMode.jsx
import { useNavigate } from 'react-router-dom';

const SelectTheMode = () => {
  const navigate = useNavigate();
  const selectedArray = [1,2,3]; // 你的选中数组

  const handleGoToGame = () => {
    // 转成JSON字符串并编码，避免URL解析问题
    navigate(`/game?selected=${encodeURIComponent(JSON.stringify(selectedArray))}`);
  };

  return <button onClick={handleGoToGame}>进入游戏</button>;
};

• 在Game组件里解析路由参数：

// Game.jsx
import { useLocation } from 'react-router-dom';

const Game = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const selectedStr = searchParams.get('selected');
  // 解码并转成数组，默认空数组兜底
  const selectedArray = selectedStr ? JSON.parse(decodeURIComponent(selectedStr)) : [];

  return <div>选中的数组：{JSON.stringify(selectedArray)}</div>;
};

• 注意：如果数组内容过大，不建议用这种方式，URL存在长度限制。

方案2：用React Context做全局状态管理 #

• 先创建一个全局Context：

// GameContext.jsx
import { createContext, useContext, useState } from 'react';

const GameContext = createContext();

export const GameProvider = ({ children }) => {
  const [selectedArray, setSelectedArray] = useState([]);

  return (
    <GameContext.Provider value={{ selectedArray, setSelectedArray }}>
      {children}
    </GameContext.Provider>
  );
};

export const useGameContext = () => useContext(GameContext);

• 在路由外层包裹Provider：

// App.jsx
import { GameProvider } from './GameContext';
import { Routes, Route } from 'react-router-dom';
import SelectTheMode from './SelectTheMode';
import Game from './Game';

function App() {
  return (
    <GameProvider>
      <Routes>
        <Route path="/" element={<SelectTheMode />} />
        <Route path="/game" element={<Game />} />
      </Routes>
    </GameProvider>
  );
}

• 在SelectTheMode里更新全局状态：

// SelectTheMode.jsx
import { useNavigate } from 'react-router-dom';
import { useGameContext } from './GameContext';

const SelectTheMode = () => {
  const navigate = useNavigate();
  const { setSelectedArray } = useGameContext();
  const localSelectedArray = [1,2,3]; // 你的选中数组

  const handleGoToGame = () => {
    setSelectedArray(localSelectedArray);
    navigate('/game');
  };

  return <button onClick={handleGoToGame}>进入游戏</button>;
};

• 在Game组件里直接获取全局状态：

// Game.jsx
import { useGameContext } from './GameContext';

const Game = () => {
  const { selectedArray } = useGameContext();

  return <div>选中的数组：{JSON.stringify(selectedArray)}</div>;
};

• 优势：适合需要在多个组件间共享状态的场景，不受路由跳转影响。

方案3：用localStorage/sessionStorage临时存储 #

• 在SelectTheMode里把数组存到本地存储：

// SelectTheMode.jsx
import { useNavigate } from 'react-router-dom';

const SelectTheMode = () => {
  const navigate = useNavigate();
  const selectedArray = [1,2,3];

  const handleGoToGame = () => {
    localStorage.setItem('selectedArray', JSON.stringify(selectedArray));
    navigate('/game');
  };

  return <button onClick={handleGoToGame}>进入游戏</button>;
};

• 在Game组件里读取并清理（可选，避免残留旧数据）：

// Game.jsx
import { useEffect, useState } from 'react';

const Game = () => {
  const [selectedArray, setSelectedArray] = useState([]);

  useEffect(() => {
    const stored = localStorage.getItem('selectedArray');
    if (stored) {
      setSelectedArray(JSON.parse(stored));
      // 用完删除，防止下次进入游戏拿到旧数据
      localStorage.removeItem('selectedArray');
    }
  }, []);

  return <div>选中的数组：{JSON.stringify(selectedArray)}</div>;
};

• 注意：存储内容是字符串，要做好类型转换，且用户手动清除本地存储会导致数据丢失。

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