react-router-dom - Canvas won't render within Route

[josh-willy91]

I have an app with multiple pages. I have a nav bar component then use a Switch and Route to list my other pages on my nav bar. The issue I'm having is when I try to create a page where I use react-three-fiber I get an 'Error type is invalid' error. The error only occurs once I place the Canvas tag inside my Route. I'm I using three-fiber wrong or is it not compatible with react-router-dom?

<NavBar>
<Switch>
     <Route>
           <Component/> 
     </Route>
     <Route>
           <Canvas>
                 React-three-fiber...
           </Canvas>
      </Route>
</Switch>

This is my first time using three-fiber so any help is greatly appreciated. Thanks!

[drcmda]

there's nothing that wouldn't be compatible, it's just a regular dom component. type invalid could mean a typo, when you import something that doesn't exist. do you have a quick sandbox?

[sarang997]

Its because react context is different than the canvas context and they need to be bridged. I am facing the same problem right now. were you able to solve this do let me know!

[joshuaellis]

Can you provide a sandbox demonstrating the issue?

[sarang997]

Hey I am facing a problem too. Here's the sandbox https://codesandbox.io/s/misty-fire-92mpl
How can I click on those objects and go to a new page?

[sarang997]

If I puty Home component in App.js inside the Router it doesn't work