title: At what nesting the Context Provider should be wrapped while using react-router and redux?
body: <p>When i was learning react I learnt to create a context.js file and put all the states which are used throughout the component tree and wrap the root component in index.js with context provider so that entire app can access them.</p>
  <p>Like this</p>
  <p>context.js</p>
  <pre><code>import React, { useState, useContex} from 'react';
  
  const AppContext = React.createContext();
  
  const AppProvider = (props) =&gt; {
    return (
      &lt;AppContext.Provider value={{ isLoggedIn: props.isLoggedIn }}&gt;
        {props.chidren}
      &lt;/AppContext.Provider&gt;
    );
  } 
  
  export const useGlobalContext = () =&gt; {
    return useContext(AppContext);
  };
  </code></pre>
  <p>index.js</p>
  <pre><code>
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;AppProvider&gt;
        &lt;App /&gt;
      &lt;/AppProvider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>And i used useGlobalContext custom hook to access those variables.</p>
  <p>But now i am using react-router and redux in my project. But i still have the necessity to use global context for some state variables. <strong>The problem is i am not able to figure out at what nesting level should i wrap the &lt;AppContext.Provider&gt; in my index.js without disturbing the functionality of react-router and redux.</strong></p>
  <p>current index.js</p>
  <pre><code>nst Routing = () =&gt; {
    console.log('store = ', store);
    return (
      &lt;Provider store={store}&gt;
        &lt;PersistGate persistor={persistor} loading={Loading}&gt;
          &lt;Router&gt;
            &lt;React.StrictMode&gt;
              &lt;Header /&gt;
              &lt;Switch&gt;
                &lt;Route exact path='/' component={App} /&gt;
                &lt;Route path='/register' component={Register} /&gt;
                &lt;Route path='/login' component={Login} /&gt;
                &lt;Route path='/logout' component={Logout} /&gt;
                &lt;Route path='/verify-email' component={VerifyEmail} /&gt;
              &lt;/Switch&gt;
              &lt;Footer /&gt;
            &lt;/React.StrictMode&gt;
          &lt;/Router&gt;
        &lt;/PersistGate&gt;
      &lt;/Provider&gt;
    );
  };
  
  ReactDOM.render(&lt;Routing /&gt;, document.getElementById('root'));
  </code></pre>
  <p>Thanks in advance.</p>
  <p><strong>Edit: 1</strong></p>
  <p>Error messages at each wrapping level</p>
  <ol>
  <li>outermost</li>
  </ol>
  <pre><code>
      const Routing = () =&gt; {
        console.log('store = ', store);
        return (
          &lt;AppProvider&gt;
            &lt;Provider store={store}&gt;
              &lt;PersistGate persistor={persistor} loading={Loading}&gt;
                &lt;Router&gt;
    
                &lt;/Router&gt;
              &lt;/PersistGate&gt;
            &lt;/Provider&gt;
          &lt;/AppProvider&gt;
        );
      };
  
  </code></pre>
  <p>Error message
  Error: Could not find &quot;store&quot; in the context of &quot;Connect(AppProvider)&quot;. Either wrap the root component in a , or pass a custom React context provider to  and the corresponding React context consumer to Connect(AppProvider) in connect options.</p>
  <ol start="2">
  <li>1st level nesting</li>
  </ol>
  <pre><code>const Routing = () =&gt; {
    console.log('store = ', store);
    return (
      &lt;Provider store={store}&gt;
        &lt;AppProvider&gt;
          &lt;PersistGate persistor={persistor} loading={Loading}&gt;
            &lt;Router&gt;
              &lt;React.StrictMode&gt;
                &lt;Header /&gt;
                &lt;Switch&gt;
                  &lt;Route exact path='/' component={App} /&gt;
                  &lt;Route path='/register' component={Register} /&gt;
                  &lt;Route path='/login' component={Login} /&gt;
                  &lt;Route path='/logout' component={Logout} /&gt;
                  &lt;Route path='/verify-email' component={VerifyEmail} /&gt;
                &lt;/Switch&gt;
                &lt;Footer /&gt;
              &lt;/React.StrictMode&gt;
            &lt;/Router&gt;
          &lt;/PersistGate&gt;
        &lt;/AppProvider&gt;
      &lt;/Provider&gt;
    );
  };
  </code></pre>
  <p>Error: No error but react router not working.</p>
  <ol start="3">
  <li>Inside router</li>
  </ol>
  <pre><code>const Routing = () =&gt; {
    console.log('store = ', store);
    return (
      &lt;Provider store={store}&gt;
        &lt;PersistGate persistor={persistor} loading={Loading}&gt;
          &lt;Router&gt;
            &lt;AppProvider&gt;
              &lt;React.StrictMode&gt;
                &lt;Header /&gt;
                &lt;Switch&gt;
                  &lt;Route exact path='/' component={App} /&gt;
                  &lt;Route path='/register' component={Register} /&gt;
                  &lt;Route path='/login' component={Login} /&gt;
                  &lt;Route path='/logout' component={Logout} /&gt;
                  &lt;Route path='/verify-email' component={VerifyEmail} /&gt;
                &lt;/Switch&gt;
                &lt;Footer /&gt;
              &lt;/React.StrictMode&gt;
            &lt;/AppProvider&gt;
          &lt;/Router&gt;
        &lt;/PersistGate&gt;
      &lt;/Provider&gt;
    );
  };
  </code></pre>
  <p>Error: Same router not working,</p>
  <p><strong>Edit 2</strong></p>
  <p>This is my context.js file</p>
  <pre><code>import React, { useContext } from 'react';
  import { connect } from 'react-redux';
  
  // This file contains all state store variables that will be useful throughout the application.
  // Thuis component wraps the whole component tree and provides a context to use these varaibles
  
  const AppContext = React.createContext();
  
  const AppProvider = (props) =&gt; {
    return (
      &lt;AppContext.Provider
      // value={{ isLoggedIn: props.isLoggedIn }}
      &gt;
        {props.chidren}
      &lt;/AppContext.Provider&gt;
    );
  };
  
  const mapStateToProps = (state) =&gt; {
    return {
      isloggedIn: state.userLogin.isLoggedIn,
    };
  };
  
  export const useGlobalContext = () =&gt; {
    return useContext(AppContext);
  };
  
  export default connect(mapStateToProps, null)(AppProvider);
  </code></pre>
  <p>Since i am using redux store inside context.js it  has to be inside  and . But if i place it inside them Router will not work.</p>