title: Using react-router with reconcilers such as react-three-fiber
body: <p>I'm try to use react-router with react-three-fiber. The issue is the <code>&lt;Switch&gt;</code> components lose their context when added inside a react-three-fiber <code>&lt;Canvas&gt;</code> element. To fix this I can wrap the switch inside a <code>&lt;Router&gt;</code> inside the Canvas. And the routes work as expected when manually typing the url. However, the ` elements now seem to reference another Router and don't work when clicked.</p>
  
  <p>Is there a way to make the elements inside and outside the <code>&lt;Canvas&gt;</code> reference the same router?</p>
  
  <p><a href="https://codesandbox.io/s/reach-router-starter-v1-9qcjc" rel="nofollow noreferrer">https://codesandbox.io/s/reach-router-starter-v1-9qcjc</a></p>
  
  <pre class="lang-js prettyprint-override"><code>const App = ({ router }) =&gt; {
    return (
      &lt;Router&gt;
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;Link to="/"&gt;Home&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to="/about"&gt;About&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to="/dashboard"&gt;Dashboard&lt;/Link&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;hr /&gt;
  
          &lt;Canvas&gt;
            &lt;Plane color="black" position={[-5, 0, 0]} /&gt;
            &lt;Router&gt;
              &lt;Switch&gt;
                &lt;Route exact path="/"&gt;
                  &lt;Home /&gt;
                &lt;/Route&gt;
                &lt;Route path="/about"&gt;
                  &lt;About /&gt;
                &lt;/Route&gt;
                &lt;Route path="/dashboard"&gt;
                  &lt;Dashboard /&gt;
                &lt;/Route&gt;
              &lt;/Switch&gt;
            &lt;/Router&gt;
          &lt;/Canvas&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  };
  
  const Home = () =&gt; &lt;Plane color="red" position={[0, 0, 0]} /&gt;;
  const About = () =&gt; &lt;Plane color="green" position={[0, 0, 0]} /&gt;;
  const Dashboard = () =&gt; &lt;Plane color="blue" position={[0, 0, 0]} /&gt;;
  </code></pre>