arrays - I have implemented counter using useContext and router. My counter value is not coming in other route?

Question

When I increment the counter in localhost/ and then I am viewing the count value at http://localhost:3000/CountView. My count value in http://localhost:3000/CountView is set to 0 again. Please help below are my files and screenshoot.

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;

Screenshot of count in http://localhost:3000/: https://i.stack.imgur.com/PNgnx.png Screenshot of count in http://localhost:3000/CountView: https://i.stack.imgur.com/rlpJE.png

Please let me know why is there a difference of count in two routes and how can I fix them.

Thanks in advance. Happy coding:)

Answer 1

I have found the solution. when you go to the link http://localhost:3000/CountView the page refreshes and the state is not maintained. Try to maintain the state by having a button through which we can go to this link.