fix: use searchParams from useSearchParams for vertical routing

- Use searchParams from Next.js useSearchParams hook instead of window.location
- Add searchParams as useEffect dependency to properly update when URL changes
- Add fallback for vertical content to prevent SSR hydration issues

This fixes the bug where all demo pages showed real-estate content.
This commit is contained in:
root
2026-02-19 13:15:19 +00:00
parent 0e524c5c3c
commit 0e418964cf
+11 -8
View File
@@ -222,6 +222,7 @@ function DemosContent() {
const [lang, setLang] = useState<Language>("es"); const [lang, setLang] = useState<Language>("es");
const [selected, setSelected] = useState<Vertical>("real-estate"); const [selected, setSelected] = useState<Vertical>("real-estate");
const [contactOpen, setContactOpen] = useState(false); const [contactOpen, setContactOpen] = useState(false);
const [initialized, setInitialized] = useState(false);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
businessName: "", businessName: "",
contactName: "", contactName: "",
@@ -242,25 +243,27 @@ function DemosContent() {
const [formSubmitted, setFormSubmitted] = useState(false); const [formSubmitted, setFormSubmitted] = useState(false);
useEffect(() => { useEffect(() => {
if (typeof window === "undefined") return; if (!searchParams) return;
// Read directly from URL
const params = new URLSearchParams(window.location.search); // Get vertical from URL
const urlVertical = params.get("vertical"); const urlVertical = searchParams.get("vertical");
const urlType = params.get("type"); const urlType = searchParams.get("type");
const urlName = params.get("name");
if (urlVertical && ["real-estate", "restaurant", "clinic", "home-services"].includes(urlVertical)) { if (urlVertical && ["real-estate", "restaurant", "clinic", "home-services"].includes(urlVertical)) {
setSelected(urlVertical as Vertical); setSelected(urlVertical as Vertical);
} else if (urlType && ["real-estate", "restaurant", "clinic", "home-services"].includes(urlType)) { } else if (urlType && ["real-estate", "restaurant", "clinic", "home-services"].includes(urlType)) {
setSelected(urlType as Vertical); setSelected(urlType as Vertical);
} }
// Get name from URL
const urlName = searchParams.get("name");
if (urlName) { if (urlName) {
setBusinessName(decodeURIComponent(urlName)); setBusinessName(decodeURIComponent(urlName));
} }
}, []); }, [searchParams]);
const t = contentByLang[lang]; const t = contentByLang[lang];
const v = verticals[selected][lang]; const v = verticals[selected]?.[lang] || verticals["real-estate"][lang];
const vName = verticalNames[lang][selected]; const vName = verticalNames[lang][selected];
useEffect(() => { useEffect(() => {