在 React Router 组件中存储状态？答案

【问题标题】：Store state within the React Router component?在 React Router 组件中存储状态？
【发布时间】：2019-02-08 04:28:43
【问题描述】：

好的，我在某些方面对 React 很陌生，我正在开发一个简单的 React 应用程序，它只有 3 页。我正在使用react-router，部分是为了学习使用它。

在一页上，我有一个设置某些状态的表单。当您转到另一条路线时，该状态显然不会持续存在，因为react-router 渲染了不同的组件。

解决方案 #1

一种解决方案是让主“App”组件呈现 3 个页面/组件之一（使用参数查找当前路由）并在那里存储状态。

解决方案 #2

另一个似乎很明显的解决方案是将状态与更新状态的所有方法一起存储在路由器组件中。

然后，我可以将更新状态的方法传递给路由器中的组件。似乎是个好主意，但我似乎在网上找不到任何关于有人这样做的任何信息。

我看到很多redux，但这对我正在做的事情来说太过分了。

那么，这可能吗？如果是，是否有某种原因我找不到任何关于它的信息？（我是否遗漏了一些可怕的安全问题或这样做会产生的其他问题。）

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

我认为您也可以尝试使用反应上下文来代替 redux。 Ref

您可以在您的 App 组件中创建一个上下文，并将您的 3 个页面组件包装在 Context Provider 中以访问该上下文。您可以在创建上下文时使用值和 setter、getter 方法传递映射，并使用该映射来更改上下文映射中的值。您可以观看this 的谈话以获得更好的理解。

希望这会有所帮助。

【讨论】：

谢谢。对于我正在为项目规模开发的内容，这似乎更加直接。考虑到它的局限性，我知道 Redux 超出了我的需要。

【解决方案2】：

Redux 是您所需要的。也请检查以下方法。

应用组件

class App extends Component {
  state= {
     test: 'test'
  };

  render() {
        return (
        <Route path="/" component={() => {<Home {...this.state.test}/>}/>
      </div>
    );
  }
}

【讨论】：

嗯。我会尝试您建议的其他方法。我知道我可以使用更高的组件管理状态，看起来路由器（已经是最高的）存储状态是有意义的。