title: More than one context with different Routes with React Router 6
body: <p>I am playing (and learning about) with Context API and React Router (v6), and having problems when I want to wrap some components inside one context, but not all of them.</p>
  <p>right know, I have this structure in my <code>App.js</code> and is working fine :</p>
  <pre><code>&lt;AuthContextProvider&gt;
          &lt;Nav /&gt;
          &lt;CharactersContextProvider&gt;
            &lt;Routes&gt;
              &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
              &lt;Route path=&quot;characters&quot; element={&lt;Characters /&gt;} /&gt;
              &lt;Route path=&quot;about&quot; element={&lt;About /&gt;} /&gt;
              &lt;Route path=&quot;characters/:name&quot; element={&lt;Details /&gt;} /&gt;
              &lt;Route path=&quot;about/:id&quot; element={&lt;MoreAbout /&gt;} /&gt;
            &lt;/Routes&gt;
          &lt;/CharactersContextProvider&gt;
  &lt;/AuthContextProvider&gt;
  </code></pre>
  <p>I would like to NOT give access to <code>&lt;MoreAbout&gt;</code> to <code>&lt;/CharactersContextProvider&gt;</code></p>
  <p>And I was simply restructuring  it like this :</p>
  <pre><code>&lt;AuthContextProvider&gt;
          &lt;Nav /&gt;
          &lt;CharactersContextProvider&gt;
            &lt;Routes&gt;
              &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
              &lt;Route path=&quot;characters&quot; element={&lt;Characters /&gt;} /&gt;
              &lt;Route path=&quot;about&quot; element={&lt;About /&gt;} /&gt;
              &lt;Route path=&quot;characters/:name&quot; element={&lt;Details /&gt;} /&gt;
            &lt;/Routes&gt;
          &lt;/CharactersContextProvider&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;about/:id&quot; element={&lt;MoreAbout /&gt;} /&gt;
          &lt;/Routes&gt;
  &lt;/AuthContextProvider&gt;
  </code></pre>
  <p>Obviously it is not the way, since React is giving me many warnings saying that no Routes matched the 4 paths inside the first Routes: <code>No routes matched Location &quot;/&quot;</code> / <code>&quot;/about&quot;</code> / <code>&quot; /characters&quot;</code>
  Not only that, but if I go to <code>&lt;Characters&gt;</code>, and then to <code>&lt;MoreAbout&gt;</code>, I still have access to the data stored in  <code>&lt;/AuthContextProvider&gt;</code>. And that i don't understand why.</p>
  <p>What would be the right way to have some components have access to a context provider, and others not, when having 2 contexts? is it possible keeping them all inside <code>App.js</code> ?</p>
  <p>Thanks in advance for any reply.</p>