[Bug]: v6.12.1 Navigating and changing pages does not work. No errors in console

[tipsxBase]

What version of React Router are you using?

6.12.1

Steps to Reproduce

I am encountering an issue in my React 18 environment where the setStateImpl method is not being called. I have thoroughly reviewed my code and ensured that I am using React version 18. However, despite my expectations, the setStateImpl method does not seem to be invoked.

Expected Behavior

I expect the setStateImpl method to be called and perform the state update as intended.

Actual Behavior

I am facing an issue after upgrading my environment to React 18 and react-router-dom v6.12.1. Initially, my pages were rendered correctly when I was using react-router-dom v6.10.0. However, after upgrading to v6.12.1, I encountered a white screen issue. Upon debugging the code in the browser console, I noticed that the setStateImpl method is not being called at the specific location within the RouterProvider component in react-router/lib/component.ts, which is causing the white screen to appear.

[krisgerhard]

+1 with React 18

6.11.2
Everything works as expected
6.12.0
Navigating and changing pages works.
Had an issue with changing route inside the same React Component. For example /page -> /page/1
componentDidUpdate did not receive the parameter 1. Thought it's an issue with my implementation and did not dig deeper.
6.12.1
Navigating and changing pages does not work. Brower URI changes but pages are not loaded. No errors in console.

[BlackEyeByLee]

+1 with React 18

Try the following example, 'useNavigate' doesn't work

codesandbox

[ns4style]

got same behavior after upgrading to 6.12.1.
webpack dev bundle is ok but navigation of production bundle doesn't work.
After small investigation I got that any minimizer plugin is causing this strange behavior. (I tried Terser and Esbuild minimizer).

[aerialist7]

+1

It works fine in development mode but doesn't work in production.
Seems that problem is in minification.

Environment:

• webpack@5.86.0
• webpack-cli@5.1.4
• terser-webpack-plugin@5.3.9
• react-router@6.12.1
• react-router-dom@6.12.1
• react@18.2.0
• react-dom@18.2.0

[simPod]

Downgrading react-router-dom to v6.21.0 helps. Did not have to downgrade react-router.

[birdofpreyru]

Same problem — in my existing project everything worked fine with react-router-dom@6.11.2 (might have work with 6.12.0 as well — not sure now); after an upgrade to v6.12.1 the navigation via Link elements broke in a peculiar way:

• No links work in my project's production build, no errors in console / no errors captured by a remote error tracking system (Sentry);
• Links still work fine in development build, running locally.
• Links still work both in production and development build of my simple test project. The difference between it, and my real project — the test one barely uses a few Suspenses for code splitting, and links still work across them; the real project heavily relies on suspenses to code-split different parts of the app, and thus I guess the way 6.12.0 messed up with the transitions did not account for complex projects with many nested suspenses, and to be safe it is probably better to downgrade to v6.11.2 until the root cause of the issue is fixed in react-router-dom.

[Razviar]

Yeah, same here, in prod "react": "18.2.0", after upgrade to "react-router-dom": "6.12.1" all navigation got broken: router just ignores any navigate actions, but URI in browser changes. Downgrade to 6.11.2 fixes the issue.

For dev enviroment everything is working fine, which is weird.

[muresanandrei]

Same here holy it seems something has been broken

[UntilGone]

Same here.react in 18.2.0 and react-router-dom in 6.12.0. In development mode it works ok, but in production when hash change, page doesn’t render. And downgrade works for me,

[brophdawg11]

Looking into the reproduction in #10579 (comment), I believe the root cause in that example seems to be calling React.lazy inside the render cycle, which results in a new Promise being created on each render. Internally React deals with thrown promises by adding custom fields but if it's a net-new promise each time it will never see those custom fields and get's itself into an infinite Suspense loop.

Lifting those React.lazy calls out of the render cycle fixes the issue: https://codesandbox.io/s/dawn-rgb-yzvtcw?file=/src/App.js. Note I also changed LazyLoad(Comp) to <LazyLoad Comp={...} /> since I don't think you're technically supposed to be calling React components and normal functions.

Does anyone else have an alternate reproduction we could look into to see if there is a core issue with how we're using startTransition or if this is just a nuance about how React 18 handles concurrent rendering?

In some cases, we think that built-in React behavior might be the source of confusion in that with transitions they don't re-show already resolved Suspense boundaries, so in some cases you can also add a key to your Suspense boundary if it's not re-showing. See #10568.