[PR #249] [MERGED] fix: wire up RouterContext.Provider in Pages Router #417

New issue

Closed

opened 2026-05-06 12:39:42 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 12:39:42 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/249
Author: @yunus25jmi1
Created: 3/4/2026
Status: ✅ Merged
Merged: 3/4/2026
Merged by: @southpolesteve

Base: main ← Head: fix/issue-239-pages-router-context-provider

📝 Commits (1)

ed13636 fix: wire up RouterContext.Provider in Pages Router (#239)

📊 Changes

4 files changed (+204 additions, -37 deletions)

View changed files

📝 packages/vinext/src/index.ts (+7 -1)
📝 packages/vinext/src/server/dev-server.ts (+34 -4)
📝 packages/vinext/src/shims/router.ts (+82 -32)
📝 tests/shims.test.ts (+81 -0)

📄 Description

Fixes #239

Problem

next/compat/router's useRouter() always returns null in Pages Router because no <RouterContext.Provider> wraps the page tree. In Next.js, the framework renders a RouterContext.Provider at the top level so both next/router and next/compat/router read from the same context.

Root-Cause Fix

Added wrapWithRouterContext(element) to the next/router shim — a plain function (not a React component) that:

Builds a router value object directly from the SSR context (server) or window.location + Router singleton (client)
Wraps the element in <RouterContext.Provider value={routerValue}>

This avoids the duplicate-state problem that a hook-based component would create. There's a single source of truth for the router context value, matching Next.js's architecture.

Why not a React component with hooks?

A PagesRouterProvider component calling useRouter() would create its own useState/useEffect/useMemo instance — a second, independent router state alongside every other component that also calls useRouter(). The plain-function approach builds the value once per render pass with zero hook overhead.

Changes

File	Change
`shims/router.ts`	New `wrapWithRouterContext()` export + wrap in `navigateClient()`
`server/dev-server.ts`	Wrap at main render, ISR re-render, error page, hydration script
`index.ts`	Wrap in production virtual module `renderPage()` + ISR re-render
`tests/shims.test.ts`	4 new tests for RouterContext behavior

Tests

useRouter returns null without provider (App Router behavior)
useRouter returns full router when wrapWithRouterContext wraps tree
useRouter reflects SSR context (pathname, query, asPath)
wrapWithRouterContext is exported from next/router

All 535 shims tests pass.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cloudflare/vinext/pull/249 **Author:** [@yunus25jmi1](https://github.com/yunus25jmi1) **Created:** 3/4/2026 **Status:** ✅ Merged **Merged:** 3/4/2026 **Merged by:** [@southpolesteve](https://github.com/southpolesteve) **Base:** `main` ← **Head:** `fix/issue-239-pages-router-context-provider` --- ### 📝 Commits (1) - [`ed13636`](https://github.com/cloudflare/vinext/commit/ed136369200e04b30d08310adc0def21ca02e301) fix: wire up RouterContext.Provider in Pages Router (#239) ### 📊 Changes **4 files changed** (+204 additions, -37 deletions) <details> <summary>View changed files</summary> 📝 `packages/vinext/src/index.ts` (+7 -1) 📝 `packages/vinext/src/server/dev-server.ts` (+34 -4) 📝 `packages/vinext/src/shims/router.ts` (+82 -32) 📝 `tests/shims.test.ts` (+81 -0) </details> ### 📄 Description Fixes #239 ## Problem `next/compat/router`'s `useRouter()` always returns `null` in Pages Router because no `<RouterContext.Provider>` wraps the page tree. In Next.js, the framework renders a `RouterContext.Provider` at the top level so both `next/router` and `next/compat/router` read from the same context. ## Root-Cause Fix Added `wrapWithRouterContext(element)` to the `next/router` shim — a plain function (not a React component) that: 1. Builds a router value object directly from the SSR context (server) or `window.location` + `Router` singleton (client) 2. Wraps the element in `<RouterContext.Provider value={routerValue}>` This avoids the duplicate-state problem that a hook-based component would create. There's a single source of truth for the router context value, matching Next.js's architecture. ### Why not a React component with hooks? A `PagesRouterProvider` component calling `useRouter()` would create its own `useState`/`useEffect`/`useMemo` instance — a second, independent router state alongside every other component that also calls `useRouter()`. The plain-function approach builds the value once per render pass with zero hook overhead. ## Changes | File | Change | |------|--------| | `shims/router.ts` | New `wrapWithRouterContext()` export + wrap in `navigateClient()` | | `server/dev-server.ts` | Wrap at main render, ISR re-render, error page, hydration script | | `index.ts` | Wrap in production virtual module `renderPage()` + ISR re-render | | `tests/shims.test.ts` | 4 new tests for RouterContext behavior | ## Tests - `useRouter` returns `null` without provider (App Router behavior) - `useRouter` returns full router when `wrapWithRouterContext` wraps tree - `useRouter` reflects SSR context (`pathname`, `query`, `asPath`) - `wrapWithRouterContext` is exported from `next/router` All 535 shims tests pass. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>