title: I have implemented counter using useContext and router. My counter value is not coming in other route?
body: <p>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.</p>
  <p><strong>App.js</strong></p>
  <pre><code>import React from 'react';
  import CountView from './CountView';
  import CountSet from './CountSet';
  import CountContext from './CountContext';
  import {
    BrowserRouter as Router,
    Route,
    Switch
  } from &quot;react-router-dom&quot;;
  function App() {
    return (
      &lt;CountContext&gt;
      &lt;Router&gt;
        &lt;Switch&gt;
                &lt;Route exact path=&quot;/&quot; component={CountSet}&gt;&lt;/Route&gt;
                &lt;Route exact path=&quot;/CountView&quot; component={CountView}&gt;&lt;/Route&gt;
                &lt;/Switch&gt;
           &lt;/Router&gt;
           &lt;/CountContext&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>CountContext.js</strong></p>
  <pre><code>import React,{createContext,useReducer,useState}  from 'react';
  export  const countContext=createContext({});
  function CountContext(props){
      const [count, setCount] = useState(0);
  
      const reducer = (intitalState, action) =&gt; {
          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 (
          &lt;countContext.Provider value={{newState,dispatch}}&gt;
              {props.children}
              &lt;/countContext.Provider&gt;
        );
  }
  export default React.memo(CountContext);
  </code></pre>
  <p><strong>CountView.js</strong></p>
  <pre><code>  import React, { useContext } from 'react';
      import {countContext} from './CountContext';
      function CountView(){
          const countSubscriber=useContext(countContext);
      return (&lt;h1&gt;{countSubscriber.newState}&lt;/h1&gt;);
      }
      export default CountView;
  </code></pre>
  <p><strong>CountSet.js</strong></p>
  <pre><code>import React,{useContext} from 'react';
  import {countContext} from './CountContext';
  function CountSet(){
      const countSubscriber=useContext(countContext);
  return (&lt;div&gt;
      &lt;h1&gt;{countSubscriber.newState}&lt;/h1&gt;
      &lt;button onClick={()=&gt;countSubscriber.dispatch({type:'Increment'})}&gt;Increment &lt;/button&gt;
      &lt;button onClick={()=&gt;countSubscriber.dispatch({type:'Decrement'})}&gt;Decrement &lt;/button&gt;
  &lt;/div&gt;);
  }
  export default CountSet;
  </code></pre>
  <p><em>Screenshot of count in  http://localhost:3000/</em>: <a href="https://i.stack.imgur.com/PNgnx.png" rel="nofollow noreferrer">https://i.stack.imgur.com/PNgnx.png</a>
  <em>Screenshot of count in  http://localhost:3000/CountView</em>: <a href="https://i.stack.imgur.com/rlpJE.png" rel="nofollow noreferrer">https://i.stack.imgur.com/rlpJE.png</a></p>
  <p>Please let me know why is there a difference of count in two routes and how can I fix them.</p>
  <p>Thanks in advance. Happy coding:)</p>