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:
+11
-8
@@ -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(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user