Open
Description
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 theelement
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)