将数据从一页传输到另一页

Question

我的 React 应用中有一个名为 Games 的页面，我的 React 路由位于 App.js 文件中。在那个游戏页面上，如果我单击 myButton，我希望它转到另一个名为“分析游戏”的页面，然后在那里填充一些变量。但是当我通常打开分析游戏（不单击 myButton）时，它定义并填充了一堆状态和变量。原因是您可以分析手动输入的游戏，而不是从游戏页面上的列表中选择。所以我有点不明白如何将游戏数据从游戏页面传输到分析游戏页面，然后只有当有人来自游戏页面时才在那里填充一些变量。

我发现此链接显示您可以使用 history.push 获取从一个页面传递到另一个页面的一些数据：React-router - How to pass data between pages in React?

但是，如果您来自游戏页面，那么如何仅在分析游戏页面上填充变量？

你会设置一个标志还是什么？最佳做法是什么？

Answer 1

这是一个很好的问题，通常可以通过两种方式完成。我将简要提及它们。 当然，还有其他方法；）

道具

React 喜欢 props，所以如果你能用它解决它，那应该是你的第一个方法。

  const App = () => {
    const [value, setValue] = useState(...)
    
    return (
      <Router>
         <Route1 render={() => <GamePage value={value} />} />
         <Route2 render={() => <AnalyzePage value={value} />} />
      </Router>
    )
  }

如果您想在 Game 或 Analyze 中更改此值，请在内部也传递 setValue。

上下文

如果路由中有非常嵌套的组件，有时人们喜欢使用上下文。

  const App = () => {
    const [value, setValue] = useState(...)
    
    return (
      <Context.Provider value={{ value, setValue}}>
        <Router>
          <Route1 render={() => <GamePage />} />
          <Route2 render={() => <AnalyzePage />} />
        </Router>
      </Context.Provider>
    )
  }

  const ComponentInsideGame = () => {
    const { value } = useContext(Context)
    ...
  }

全球

如果你想在 React 后面发送一些东西，例如你根本不想为这些共享数据触发渲染。您可以使用 ref 进行全局上下文。

  const App = () => {
    const ref = useRef({
      gameConfiguration: ...,
      runGame: () => {}
    ))
    
    return (
      <Router>
         <Route1 render={() => <GamePage />} />
         <Route2 render={() => <AnalyzePage />} />
      </Router>
    )
  }

  const ComponentInsideGame = () => {
    const { current } = useContext(Context)
    current.gameConfiguration = {...}
    current.runGame()
    ...
  }

路线状态

您提供的链接是浏览器状态的另一种方式，但这实际上不是一种反应方式，它是一种浏览器方式恕我直言。但是你知道吗，反正对你有用就好:)