Context providers passed to Route element attribute are broken

[madisp]

I'm using React Router as a...

library

Reproduction

using <...Context.Provider> tags within the <Route element=... /> attr seems to be broken.

• git clone madisp/react-router-bug
• npm install && npm run start
• point browser to http://localhost:3030
• click on "Increment!"

Issue can be worked around with:

• by downgrading to react-router 7.1.3 or older
• by moving the <Context.Provider> tags outside of the react router (not always feasible as you may have route-specific contexts)
• by moving <Context.Provider> tags into a separate react component that gets used in the element attr. (The /alt route in the reproducing project).

System Info

node 22.14.0
react-router 7.1.4
vite 6.2.0
typescript 5.7.3
chrome 133.0.6943.127

Used Package Manager

npm

Expected Behavior

Using react context providers within <Route /> elements work, example from the reproducing code:

<Route path="/" element={
  <CounterContext.Provider value={counter}>
    <Count />
    <Increment />
  </CounterContext.Provider>
} />

expected result: count increases (react-router 7.1.3 or older)

Actual Behavior

actual result: count does not increase (react router 7.1.4 or newer)

[madisp]

NOTE: I'm not really a js/ts/frontend dev but encountered the bug. It might be I've just been using react-router wrong or in a weird way but seeing context providers break in a patch version was a bit surprising.

[meyerjoe]

+1

Just ran into the same issue with a context provider in a more complex setup. Haven't properly isolated it yet.
Seems like a state change in the provider value doesn't trigger a rendering of the route element anymore in my setup.
Worked until 7.1.3 , but not anymore since 7.1.4