@@ -84,8 +84,6 @@ export const useReloadEffect = (
8484 */
8585export const ReloadContext = createContext ( async ( ) : Promise < void > => { } ) ;
8686
87- let routeState : Record < string , any > = { } ;
88-
8987/**
9088 * Returns a stateful value which bounded to route, and a function to update it.
9189 * Note that the value won't be updated across components.
@@ -97,10 +95,10 @@ let routeState: Record<string, any> = {};
9795 */
9896export function useRouteState < T extends { } > ( key : string , initial : T ) {
9997 return useReducer ( ( _old : T , newvalue : T ) => {
100- // @ts -ignore
101- routeState [ key ] = newvalue ;
98+ const routeState = history . state ?? { } ;
99+ history . replaceState ( { ... routeState , [ key ] : newvalue } , "" ) ;
102100 return newvalue ;
103- } , ( routeState [ key ] ?? initial ) as unknown as T ) ;
101+ } , ( history . state ?. [ key ] ?? initial ) as unknown as T ) ;
104102}
105103
106104export const RouterHost = ( {
@@ -206,18 +204,10 @@ const eventReplaceState = "replaceState";
206204const events = [ eventPopstate , eventPushState , eventReplaceState ] ;
207205
208206if ( typeof history !== "undefined" ) {
209- window . addEventListener ( "popstate" , ( e ) => {
210- routeState = e . state ?? { } ;
211- } ) ;
212207 for ( const type of [ eventPushState , eventReplaceState ] as const ) {
213208 const original = history [ type ] ;
214- history [ type ] = function (
215- _data : any ,
216- _unused : string ,
217- url ?: string | URL | null | undefined
218- ) {
219- const result = original . apply ( this , [ routeState , "" , url ] ) ;
220- routeState = { } ;
209+ history [ type ] = function ( ...args : Parameters < typeof original > ) {
210+ const result = original . apply ( this , args ) ;
221211 const event = new Event ( type ) ;
222212 unstable_batchedUpdates ( ( ) => {
223213 dispatchEvent ( event ) ;
0 commit comments