[Bug]: [ProxyFacade] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment]

[ErickSharp]

What version of React Router are you using?

6

Steps to Reproduce

Code usage snippet below:

Expected Behavior

Seeing that all of the children of the < Routes > component are < Route >s, it should be working correctly and not raising an error.

Actual Behavior

Fails to work, saying that children should all be < Route >s when they already are.

[ErickSharp]

Just downgraded to version 5, changed the Routes component to a Switch, and it is working perfectly... There is something wrong here...

[aksh05]

@ErickSharp Are you using react hot loader in your app? The error seems related to that, because react hot loader wraps everything with proxies and hence you get the type of your function(Component) as [ProxyFacade], which leads to an error from react router as it verifies if there is anything other than Route or ReactFragment as children of Routes. Check here
You can either try removing hot loader first to verify if it is causing the issue or try fixing the hot loader issue as mentioned here.

PS: Above solution is only based on what you posted here. I might very well be wrong as I don't have all the details of your app configuration.

[ErickSharp]

@ErickSharp Are you using react hot loader in your app? The error seems related to that, because react hot loader wraps everything with proxies and hence you get the type of your function(Component) as [ProxyFacade], which leads to an error from react router as it verifies if there is anything other than Route or ReactFragment as children of Routes. Check here

You can either try removing hot loader first to verify if it is causing the issue or try fixing the hot loader issue as mentioned here.

PS: Above solution is only based on what you posted here. I might very well be wrong as I don't have all the details of your app configuration.

Yes, you are correct. I am using a hot-loader inside of an electron app. I will try the fix that you mentioned above and report back in this thread.

[johnhillphoto]

Would it be possible to add some kind of configuration option to disable this invariant error? Our app works perfectly in production, but we cannot use react-hot-loader now. Our app worked well with v6.0.0 also.

[timdorr]

You need to move those components into the element prop.

[aksh05]

Thanks @timdorr, I forgot to mention that element prop should be added as well. But I still think @ErickSharp has to fix the hot loader issue in order to completely resolve the error, because RHL is anyways going to wrap the components with proxies and the same issue would occur again even after adding the element prop.

[john-kamau01]

Hello,

I think the solution to the code is to wrap the routes in a 'Routes'.

<Routes> <Route path='/' element={} /> <Route path='/path-2' element={} /> </Routes>