如果我们把window.location.hash放在useEffect中,它总是错误地返回“0”。显然,这与SSR有关。我需要可靠地获取项目URL的哈希部分。我应该怎样做才最好呢?
window.location.hash
useEffect
2ledvvac1#
服务器端代码需要等到代码加载到浏览器中后才能使用浏览器API。Vanilla js服务器端兼容
const [isMounted, setMounted] = useState(false); useEffect(() => { if (isMounted) { console.log('hash', window.location.hash); } else { setMounted(true); } }, [isMounted]); if(!isMounted) return <>Loading...</>;
使用next/router
import { useRouter } from 'next/router'; const { asPath } = useRouter(); useEffect(()=>{ const hash = asPath.split('#')[1]; }, [ asPath ]);
FYI你的代码不应该返回零。第一个出现在脑海中的罪魁祸首是当一个速记条件被使用而没有一个else。
window && window.location.hash
这应该有一个else
(window && window.location.hash) || null
或
window && window.location.hash ? window.location.hash : null
ttygqcqt2#
扩展@Sean W的答案,如果你想从一个哈希键中得到一个特定的哈希值,you can use URLSearchParams:
// example path: /#error=unauthorized_client&error_code=401error_description=Something+went+wrong import { useRouter } from 'next/router'; const { asPath } = useRouter(); useEffect(() => { const hash = (asPath as string).split("#")[1]; // error=unauthorized_client&error_code=401error_description=Something+went+wrong const parsedHash = new URLSearchParams(hash); const errorHash = parsedHash.get("error_description"); // Something went wrong }, []); // `asPath` omitted from dependencies as ESLint states it won't change
2条答案
按热度按时间2ledvvac1#
服务器端代码需要等到代码加载到浏览器中后才能使用浏览器API。
Vanilla js服务器端兼容
使用next/router
FYI你的代码不应该返回零。第一个出现在脑海中的罪魁祸首是当一个速记条件被使用而没有一个else。
这应该有一个else
或
ttygqcqt2#
扩展@Sean W的答案,如果你想从一个哈希键中得到一个特定的哈希值,you can use URLSearchParams: