我已经使用 useContext 和路由器实现了计数器我的计数器值不是从其他途径进来的吗？

问题描述

当我在 localhost/ 中增加计数器然后我在 http://localhost:3000/CountView 查看计数值。 我在 http://localhost:3000/CountView 中的计数值再次设置为 0。请帮助以下是我的文件和屏幕截图。

App.js

import React from 'react';
import CountView from './CountView';
import CountSet from './CountSet';
import CountContext from './CountContext';
import {
  browserRouter as Router,Route,Switch
} from "react-router-dom";
function App() {
  return (
    <CountContext>
    <Router>
      <Switch>
              <Route exact path="/" component={CountSet}></Route>
              <Route exact path="/CountView" component={CountView}></Route>
              </Switch>
         </Router>
         </CountContext>
  );
}

export default App;

CountContext.js

import React,{createContext,useReducer,useState}  from 'react';
export  const countContext=createContext({});
function CountContext(props){
    const [count,setCount] = useState(0);

    const reducer = (intitalState,action) => {
        console.log('I am here');
        if(action.type === 'Increment') {
            console.log('I am in Increment');
       return intitalState+1;
        }
        if(action.type === 'Decrement') {
            return intitalState-1;
             }
      }
  
      const [newState,dispatch] = useReducer(reducer,count);

      return (
        <countContext.Provider value={{newState,dispatch}}>
            {props.children}
            </countContext.Provider>
      );
}
export default React.memo(CountContext);

CountView.js

  import React,{ useContext } from 'react';
    import {countContext} from './CountContext';
    function CountView(){
        const countSubscriber=useContext(countContext);
    return (<h1>{countSubscriber.newState}</h1>);
    }
    export default CountView;

CountSet.js

import React,{useContext} from 'react';
import {countContext} from './CountContext';
function CountSet(){
    const countSubscriber=useContext(countContext);
return (<div>
    <h1>{countSubscriber.newState}</h1>
    <button onClick={()=>countSubscriber.dispatch({type:'Increment'})}>Increment </button>
    <button onClick={()=>countSubscriber.dispatch({type:'Decrement'})}>Decrement </button>
</div>);
}
export default CountSet;

http://localhost:3000/ 中计数的屏幕截图：https://i.stack.imgur.com/PNgnx.png http://localhost:3000/CountView 中计数的屏幕截图：https://i.stack.imgur.com/rlpJE.png

请告诉我为什么两条路线的数量不同，我该如何解决。

提前致谢。快乐编码:)

解决方法

我找到了解决方案。当您转到链接 http://localhost:3000/CountView 时，页面会刷新且状态未维护。尝试通过一个按钮来保持状态，通过该按钮我们可以转到此链接。