Skip to content

Context providers passed to Route element attribute are broken #13118

Open
@madisp

Description

@madisp

I'm using React Router as a...

library

Reproduction

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

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)

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions