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

This isn’t a React Router bug. It’s caused by @types/react. This might be a fix: https://github.com/facebook/react/issues/24304#issuecomment-1092563688

@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.

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 😎

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.

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!

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

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!

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.

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" />

@brophdawg11 I was experiencing the same issue as @polys. I’ve only just found out, that in my case, it’s linked to this: https://github.com/remix-run/react-router/issues/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

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 😃

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.