[Bug]: v5 components with React 18 & TypeScript result in "cannot be used as a JSX component"

[polys]

What version of React Router are you using?

5.2.0

Steps to Reproduce

Just use v5 with React 18 and TypeScript.

Expected Behavior

It works.

Actual Behavior

Results in:

'Router' cannot be used as a JSX component.
  Its instance type 'Router' is not a valid JSX element.

'Route' cannot be used as a JSX component.
  Its instance type 'Route<{}, "/test/...">' is not a valid JSX element.

'Redirect' cannot be used as a JSX component.
  Its instance type 'Redirect' is not a valid JSX element.

[timdorr]

This isn't a React Router bug. It's caused by @types/react. This might be a fix: facebook/react#24304 (comment)

[polys]

Sure, downgrading types makes the problem go away at 'compile' time, but routing still doesn't work; clicking any link just does nothing.

Maybe @types/react is a red herring and mentioning them in the issue was misleading. Not sure if the actual issue is similar to #7870 but, in any case, I just wanted to flag that React Router v5 doesn't seem to be very happy with React 18.

Not sure if v6 has the same issue, but upgrading to v6 is just not feasible for a lot of us right now... not until there's feature parity with v5 (for us, the blocker is #8139 and this comment suggests v5 is still supported).

Just to clarify, I'm not in any rush to upgrade to React 18, nor 'demanding' any fixes. Just thought I'd flag it since I came across this behaviour. I would also be very happy to contribute to a fix if you could point me to right direction 😎

[Swizec]

Can this be reopened? The issue is a real problem when upgrading React, if you don't have time to also update React Router. Plus this warning makes it seem like we shouldn't ...

[Mario-Eis]

The backwards compatibility layer doesn't seem to have the Prompt feature. So its not viable for us. My vote is also for re-opining this issue.

[LeandroDG]

The backwards compatibility layer doesn't seem to have the Prompt feature. So its not viable for us. My vote is also for re-opining this issue.

Agreed, this should be reopened based on this. Thanks!

[sjoerdsmink]

@timdorr could you please reply why this issue remains closed? As long as Prompt is not implemented in v6, it's not an option for us to upgrade. Which now also means we can't use React 18.

[petrvecera]

Hi guys, from the comments I assume that this is still an issue right? React router v5 is still not compatible with React 18.

We can't really update to v6 - we always try to add it (task to update/re-check the current status) to some not that packed sprints, spend few days on it - just to rollback to v5 because something just doesn't work, as pointed in previous comments. 😢

[timdorr]

v5 works just fine with React 18: https://stackblitz.com/edit/react-routing-examples-paxyww?file=index.js

The errors you're getting here are TypeScript-related and not related to either React or React Router directly. Neither v5 nor React itself provide types (they come from DefinitelyTyped). Hence, the errors you're seeing are related to external issues in the DT types. This remains closed because there's nothing to do here.

[polys]

Even if you work around the typing issues, it still doesn't work in our case (clicking links does does nothing for example).

Does anyone know of decent alternatives to react-router?
v6 isn't an option for us, and based on the above comment, staying on v5 isn't either I guess.

[brophdawg11]

Hey folks! This issue seems to have split into a few parallel discussions so I'd like to split them out for clarity and make sure that we're able to discuss them individually:

1. react-router v5 doesn't work with react 18
   • This is not the case as shown in Tim's stackblitz linked above
2. react-router v5 doesn't work with react 18 and typescript
   • As Tim mentioned above the TS issues are from the external typings so there's not really anything for react-router v5 to do so if that's still an issue there may need to be an issue opened on the DefinitelyTyped repo
3. v6 doesn't have <Prompt>
   • This is currently the case and there's an open issue for that in [V6] [Feature] Getting usePrompt and useBlocker back in the router #8139, so I would move any prompt related discussions over there
   • There's a lot of new functionality coming in 6.4.0 that impacts the best way to do something like a prompt/blocker feature so we need to let those land and make sure we're getting the right API for that type of UX.
4. @polys For your "clicking links does nothing" case - could you provide a reproduction in a fresh issue? The links in Tim's stackblitz above seem to work fine with react-router v5 and react 18, so I'm unclear on what specific issue you're facing?

[boy-incerta]

@brophdawg11 I was experiencing the same issue as @polys.
I've only just found out, that in my case, it's linked to this: #7870 . When the router was nested in Reacts' StrictMode, the url would change, but the view won't update.

The bug report mentions a patch for this issue. So I was able to solve this by installing react-router-dom@5.3.3 and can confirm navigation works with react@18.0.0

@polys Perhaps this can help you as well, with the non-working navigation.

Cheers

[arackaf]

@timdorr can you elaborate on why you think this is an issue with @types/react, as opposed to @types/react-router-dom?

It looks like MemoryRouter (and other things) are not typed to accept children. There was indeed a (maddening) change with @types/react whereby children is no longer implicitly valid. But isn't the fix for the @types/react-router-dom package to have components like MemoryRouter switch to FC.PropsWithChildren or whatever it is?

[arackaf]

Oh my gawwwwwd @types/react-router-dom is pulling in its own version of @types/react-router into its own local node_modules. The version it's pulling in is old.

This appears to be fixed in latest. A simple yarn resolution should fix this yassssss.

Sorry to bother everyone, and thanks to whomever applied the very fix I described above :)

[callagga]

@arackaf - how did you identify this was the case?

[arackaf]

@callagga by looking in my node_modules at the RR typings installed.

[mnieber]

@arackaf In which version is it fixed? I mean: is it fixed in a v5 version? I'm on 5.3.3 and running into the mentioned problem.

The version it's pulling in is old.

Does this mean there is a bug in v5 after all?

[nathanhleung]

Oh my gawwwwwd @types/react-router-dom is pulling in its own version of @types/react-router into its own local node_modules. The version it's pulling in is old.

This appears to be fixed in latest. A simple yarn resolution should fix this yassssss.

Sorry to bother everyone, and thanks to whomever applied the very fix I described above :)

I was running into this same issue when I upgraded my React Router version; deleting my yarn.lock and reinstalling with yarn fixed it (I think what happened was when I reinstalled, @types/react-router-dom started pulling in the latest React types instead of the old version that was pinned in the lockfile).

If you're uncomfortable with and/or can't delete your lockfile, digging into it and manually changing the version of @types/react that @types/react-router-dom installs is probably your best bet

[chenxiaochun]

I resolve this issue is:

import { Redirect as RouterRedirect } from 'react-router-dom'
import type { RedirectProps } from 'react-router-dom'

const Redirect = (RouterRedirect as unknown) as React.ComponentClass<RedirectProps>

<Redirect to="http://link.com" />

[juiceo]

We had this issue, and were able to resolve it by making sure we had only one version of the following packages installed - in our case:

react: 18.2.0
react-dom: 18.2.0
react-router-dom: 5.3.4
@types/react: 18.2.22
@types/react-dom: 18.2.7
@types/react-router-dom: 5.3.3

Might be a different setup for you, but in our case: we have a lerna monorepo setup with yarn and we can check the installed versions by running yarn list package-name at the repo root. If the command prints many different versions for one of the above packages, that might be your problem.

The way to force all dependencies to use the same version of a package is to specify that in your yarn.lock or package-lock.json. A handy tool for that is yarn-deduplicate

Hope that helps!