上下文 API 在切换路由器链接时丢失数据

Question

https://codesandbox.io/s/fast-glitter-3mpwx

嗨， 在上面的代码框中，有两个路由器链接设计和构建，每个链接都包含一个计数器组件，其中 DesignContextProvider 用于设计，BuildContextProvider 用于构建

计数器变量在BuildContext 和DesignContext 中都可用，所以当我从BuildContext 增加计数器并切换到设计路线BuildContext 丢失数据，重置为0，反之亦然DesignContext ，感觉 Context 正在重新渲染并应用初始状态

我想要实现的是，即使在切换HashRouter 链接之后，也要在两个上下文上维护数据

构建上下文：

import { createContext, Component } from "react";

export class BuildContextProvider extends Component {
    
    state = {
        counter: 0,
    };

    updateCounter = () => {
        this.setState({
            counter: this.state.counter + 1,
        })
    }
    
    render() {
        return(
            <BuildContext.Provider
                value={{ ...this.state, updateCounter: this.updateCounter }}
            >
                {this.props.children}
            </BuildContext.Provider>
        )
    }
}

export const BuildContext = createContext();

设计上下文：

import { createContext, Component } from "react";

export class DesignContextProvider extends Component {
    
    state = {
        counter: 0,
    };

    updateCounter = () => {
        this.setState({
            counter: this.state.counter + 1,
        })
    }
    
    render() {
        return(
            <DesignContext.Provider
                value={{ ...this.state, updateCounter: this.updateCounter }}
            >
                {this.props.children}
            </DesignContext.Provider>
        )
    }
}

export const DesignContext = createContext();

App.js

<Switch>
        <Route path="/build">
          <BuildContextProvider>
            <Build></Build>
          </BuildContextProvider>
        </Route>

        <Route path="/design">
          <DesignContextProvider>
            <Design></Design>
          </DesignContextProvider>
        </Route>
      </Switch>

构建和设计组件：

const Build = () => {
    const { updateCounter, counter } = useContext(BuildContext);
    return(
        <div>
            <button onClick={updateCounter}>+</button>
            <span>{counter}</span>
        </div>
    )
}

const Design = () => {
    const { updateCounter, counter } = useContext(DesignContext);
    return(
        <div>
            <button onClick={updateCounter}>+</button>
            <span>{counter}</span>
        </div>
    )
}

Answer 1

您可以将提供程序放在路由之外，这样提供程序中的状态就不会重置

<DesignContextProvider>
    <BuildContextProvider>
        <Switch>

        <Route path="/build">
            <Build/>
        </Route>

        <Route path="/design">
            <Design/>
        </Route>
      </Switch>
    </BuildContextProvider>
  </DesignContextProvider>