Question

好吧，我在某些方面对React还是很陌生，我正在开发一个3页的简单React应用。我正在部分使用react-router，以便我可以学习使用它。

在一页上，我有一个设置某些状态的表单。当您走到另一条路线时，状态显然不会持久，因为react-router呈现了不同的分量。

解决方案＃1

一种解决方案是让主要的“ App”组件呈现3个页面/组件之一（使用params查找当前路线），然后在其中存储状态。

解决方案2

另一个显而易见的解决方案是将状态以及所有更新状态的方法存储在Router组件中。

然后，我可以将方法更新为路由器中组件的状态。似乎是个好主意，但我似乎无法在网上找到有关任何从事此类工作的人的信息。

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

那有可能吗？如果是这样，我是否出于某种原因找不到任何东西？（我错过了一些可怕的安全措施或其他可能引起此问题的陷阱）。

Answer 1

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

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

希望这会有所帮助。

Answer 2

您需要Redux。也请在下面的方法中进行检查。

应用程序组件

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

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

在React Router组件中存储状态？

2 个答案: