hydration fails on CollapsibleSection with hash in URL (#24105)

Author: Peter Bengtsson

components/page-header/Breadcrumbs.tsx

@@ -12,13 +12,14 @@ export type BreadcrumbT = {
 
 export const Breadcrumbs = () => {
   const router = useRouter()
-  const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
+  // remove query string and hash
+  const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0].split('#')[0]}`
   const { breadcrumbs } = useMainContext()
 
   return (
     /*
-      NOTE: The breadcrumbs class and the nav tag are used by the 
-      LUNR search scripts. The a tag generated by the Link is also used.
+      NOTE: The breadcrumbs class and the nav tag are used by the
+      Lunr search scripts. The a tag generated by the Link is also used.
       If these change, please also change
       updating script/search/parse-page-sections-into-records.js.
     */

components/sidebar/SidebarProduct.tsx

@@ -30,7 +30,9 @@ export const SidebarProduct = () => {
   }
 
   const productTitle = currentProductTree.renderedShortTitle || currentProductTree.renderedFullTitle
-  const routePath = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
+  // remove query string and hash
+  const routePath = `/${router.locale}${router.asPath.split('?')[0].split('#')[0]}`
+
   const hasExactCategory = !!currentProductTree.childPages.find(({ href }) =>
     routePath.includes(href)
   )