title: How to solve React-Router-dom contradicting with context API state
body: <p>I have the following return function taken form App.js, to keep things clear, the main problem is once I hit a undefined route instead of redirection to 404 it shows a white screen, the redirect is not working at all, even if I use different method like putting 404 component at the bottom, right before switch, it still don't work, I have been experimenting but no luck at all, what is causing this is the state, as you can see in the code I am providing state to certain components if I do set all the providers to the whole app no problem at all but I don't want that, I have 3 states
  one global state the wraps four components , and two states wrapping two routes, I even tried to create a context route according to one answer regarding similar problem but still no luck, I thing the state is somehow blocking the flow, for some reason any idea around this ?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>return (
      &lt;Router&gt;
        &lt;Fragment&gt;
          &lt;Switch&gt;
            &lt;Route path='/' exact component={Home} /&gt;
            &lt;Route path='/signin' exact component={SignIn} /&gt;
            &lt;Route path='/restpassword' exact component={RestPassword} /&gt;
            &lt;Route path='/signup' exact component={SignUp} /&gt;
            &lt;Route path='/404' exact component={NotFound} /&gt;
            {/* &lt;ContextRoute exact path='/dashboard' contextComponent={ModalState} component={Dashboard} /&gt; */}
            &lt;GlobalState&gt;
              &lt;Route path='/dashboard' exact component={Dashboard} /&gt;
              &lt;FirstState&gt;
                &lt;Route path='/inofrmationA' exact component={inofrmationA} /&gt;
              &lt;/FirstState&gt;
              &lt;SecondState&gt;
                &lt;Route path='/inofrmationB' exact component={informationB} /&gt;
              &lt;/SecondState&gt;
              &lt;Route path='/settings' exact component={Settings} /&gt;
            &lt;/GlobalState&gt;
            // If nothing the trigger redirection to 404 route. 
            &lt;Redirect to='/404' /&gt;
          &lt;/Switch&gt;
        &lt;/Fragment&gt;
      &lt;/Router&gt;
    );</code></pre>
  </div>
  </div>
  </p>