在组件之间路由时如何保持 React 新的 Context API 状态？

Summary:

1）你知道当通过路由挂载/卸载时如何保持Context Provider的状态吗？ 2）或者你知道一个维护良好的 Flux 实现支持多个独立的存储吗？

详细地：

除了 React 组件自己的状态之外，到目前为止我主要使用的是 redux。除了不喜欢在全球范围内管理每个状态的想法之外，即使它可能只与子树相关，它也成为我的新项目的一个问题。

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

我读到了如何使用 redux 动态地将减速器添加到全局存储中，但实际上我发现 Reacts Context API 的方法更好，我可以将某些状态封装在 Provider 中，并可以在任何需要的地方使用它。

我遇到的唯一问题是，Provider 和 Consumer 是 React 组件，因此如果它们是组件的一部分，通过路由安装和卸载，则可能已创建或获取一次的状态就会消失。

在我看来，除了将状态暂时存储在本地存储或服务器上之外，没有办法解决这个问题。如果有请告诉我！！！

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

我还考虑了一个更原始的 Flux 实现，它允许多个存储，可以用相关组件子树封装。但除了 Redux 之外，我还没有真正找到任何维护良好的 Flux 实现。 Mobx 是个例外，但相对于 Mobx 的 observable 解决方案，我真的更喜欢 Redux 的 reducer 解决方案。再说一遍，如果您知道维护良好的多存储 Flux 实现，请告诉我！

我真的很高兴收到一些反馈，并希望您能为我指出一个比动态减速器 Redux 或临时持久的 Context 状态更令人满意的方向。

预先非常感谢！

抱歉，回答得太晚了

你在使用 React Router 吗？

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

这是一个例子：

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>
    );
}

import About from '../components/About';

const Router = () => {
    return (
        <Switch>
            <Route exact path='/about' component={About}></Route>
        </Switch>
}

在您的主主页组件上，您必须使用 Link 或 Navlink 在组件之间“切换”。因此，你会得到类似...

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

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

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