Reactjs 在组件之间进行路由时，如何保持新的上下文API状态？

总结：

1） 您知道如何在通过路由装载/卸载上下文提供程序时保持其状态吗？ 2） 或者您是否知道一个维护良好的Flux实现，它支持多个独立的存储

详细内容：

除了React组件本身的状态外，到目前为止，我一直在使用大部分redux。除了不喜欢让每个州都进行全球管理的想法之外，即使它可能只与子树相关，它也成为我的新项目的一个问题

我们希望动态加载组件，并通过路由将其添加到应用程序中。为了能够让组件为即插即用做好准备，我们希望它们能够处理自己的状态（存储它，从服务器请求它，提供修改它的策略）

我读过关于如何使用redux动态地向全局存储添加减缩器的文章，但实际上我发现Reacts上下文API的方法更好，我可以在提供程序中封装一些状态，并可以在需要时使用它

我唯一的问题是，提供者和使用者都是React组件，因此如果它们是通过路由装载和卸载的组件的一部分，那么可能创建或获取过一次的状态就消失了

在我看来，除了将状态临时存储在本地存储或服务器上之外，似乎没有办法解决这个问题。如果有，请让我知道

如果没有更好的解决方案：

我还考虑了一个更原始的Flux实现，它允许多个存储，可以用相关的组件子树进行封装。但除了Redux之外，我还没有发现任何维护良好的Flux实现。Mobx是个例外，但我更喜欢Redux的reducer解决方案，而不是Mobx的可观察解决方案。同样，如果您知道一个维护良好的多商店流量实现，请让我知道

我真的很高兴收到一些反馈，希望你们能给我指出一个比动态reducer Redux或临时持久化上下文状态更令人满意的方向

---

提前多谢

因此我找到了一种解决上下文问题的方法（第一个问题）：我将提供者组件的状态存储在一个变量中。这样，当该组件再次装入时，它使用“持久化”状态作为其状态的初始值

let persistedState = {};
const Context = React.createContext();

export class Provider extends React.PureComponent {

  state = { ...persistedState };

  updateState = (nextState) => this.setState(nextState, () => {
    persistedState = {...this.state};
  });

  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

let persistedState={}；
const Context=React.createContext（）；
导出类提供程序扩展了React.PureComponent{
state={…persistedState}；
updateState=（nextState）=>this.setState（nextState，（）=>{
persistedState={…this.state}；
});
render（）{
返回(
{this.props.children}
);
}
}

很抱歉，回答得太晚了

你在用路由器吗

该状态应保持不变，并且不应清除是否正确导航。不应重新加载页面，因为这将导致状态清除

以下是一个例子：

import { Router as RootRouter } from 'react-router-dom';
import Router from './routes/Router';

const App = () => {
    return (
        <MyContext value={useReducer(myReducer, initialState)}>
            <RootRouter history={browserHistory}>
                <Router />
            </RootRouter>
        </AuthContext>
    );
}

从'react Router dom'导入{Router as RootRouter}；
从“./routes/Router”导入路由器；
常量应用=（）=>{
返回(
);
}

import About from'../components/About'；
常数路由器=（）=>{
返回(
}

在主主主组件上，您必须使用链接或导航链接在组件之间“切换”。因此，您将有类似于

import { Link } from 'react-router-dom';

<Link to="/about">About</Link>

从'react router dom'导入{Link}；
关于

---

这会将您导航到“关于”页面，在该页面中，您仍然可以访问上下文阶段，其中没有任何内容被清除。

在使用属性

target=“\u blank”时，有没有办法使用持久化状态

带有

链接

标记。我可以在不使用

目标

属性的情况下使用持久化状态，但添加属性时它会显示为空。我也需要该属性，因为我需要在新选项卡中打开下一页。@arbit如果在新选项卡中打开，它将始终清除状态。您想要的是持久化最好的方法是将其保存在本地存储中，然后从中读取，并将从本地存储中读取的内容用作当前状态。

import { Link } from 'react-router-dom';

<Link to="/about">About</Link>