diff --git a/packages/tuono/src/router/components/Link.tsx b/packages/tuono/src/router/components/Link.tsx index 3e938ad5..6cc92a15 100644 --- a/packages/tuono/src/router/components/Link.tsx +++ b/packages/tuono/src/router/components/Link.tsx @@ -8,7 +8,7 @@ export default function Link( e.preventDefault() props.onClick?.(e) useRouterStore.setState({ location: { pathname: props.href || '' } }) - window.history.pushState('', '', props.href) + history.pushState(props.href, '', props.href) } return ( diff --git a/packages/tuono/src/router/components/RouterProvider.tsx b/packages/tuono/src/router/components/RouterProvider.tsx index 71064d53..46c713e0 100644 --- a/packages/tuono/src/router/components/RouterProvider.tsx +++ b/packages/tuono/src/router/components/RouterProvider.tsx @@ -1,7 +1,7 @@ import { getRouterContext } from './RouterContext' import { Matches } from './Matches' import { useRouterStore } from '../hooks/useRouterStore' -import React, { useLayoutEffect, type ReactNode } from 'react' +import React, { useEffect, useLayoutEffect, type ReactNode } from 'react' type Router = any @@ -72,12 +72,35 @@ const initRouterStore = (props?: ServerProps): void => { }, []) } +const useListenUrlUpdates = (): void => { + const updateLocation = useRouterStore((st) => st.updateLocation) + + const updateLocationOnPopStateChange = ({ target }: any): void => { + const { pathname, hash, href, search } = target.location + updateLocation({ + pathname, + hash, + href, + searchStr: search, + search: new URLSearchParams(search), + }) + } + useEffect(() => { + window.addEventListener('popstate', updateLocationOnPopStateChange) + return (): void => { + window.removeEventListener('popstate', updateLocationOnPopStateChange) + } + }, []) +} + export function RouterProvider({ router, serverProps, }: RouterProviderProps): JSX.Element { initRouterStore(serverProps) + useListenUrlUpdates() + return (