mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 04:20:39 +00:00
zeekayandHanzo Dev
e4abf68da7
One export file answers at more than one address: /dev.html, /agents.html, and the root of dev.hanzo.ai, which publishes dev.html as its index. The composer, the appearance dock, the product kit and the account nav chose their markup from usePathname(), which reads the address. There it named a different route than the export was rendered for, so hydration failed with React #418. They now read the route from the router tree, which is the same on the server and in the browser at any address. Co-authored-by: Hanzo Dev <[email protected]>
21 lines
856 B
TypeScript
21 lines
856 B
TypeScript
'use client'
|
|
|
|
import { createContext, useContext, type ReactNode } from 'react'
|
|
import { useSelectedLayoutSegments } from 'next/navigation'
|
|
|
|
// The route a page was exported for, not the address it was loaded from.
|
|
//
|
|
// One export file answers at more than one address: /dev.html, and the root of
|
|
// dev.hanzo.ai, which publishes out/dev.html as its index. `usePathname()` reads
|
|
// the address, so markup chosen from it differs between the export and the
|
|
// first client render there. The router tree names the route at every address.
|
|
|
|
const Here = createContext('/')
|
|
|
|
export function Route({ children }: { children: ReactNode }) {
|
|
const segments = useSelectedLayoutSegments().filter((s) => !s.startsWith('('))
|
|
return <Here.Provider value={`/${segments.join('/')}`}>{children}</Here.Provider>
|
|
}
|
|
|
|
export const useRoute = (): string => useContext(Here)
|