我现在正在使用Create react应用程序作为react应用程序,并试图迁移到Nextjs。访问url数据,如主机,协议和查询参数已成为一个大问题。
最后意识到我需要通过getServerSideProps函数中的上下文prop访问它们,我将它们作为prop返回到我的组件,但我不想作为prop向下传递到一个子组件函数,这是许多级别的。我如何在一个非常深的子组件函数中的其他地方访问此URL信息。
这是CRA的功能。我显然不能在服务器端使用window.location.hostname,所以我正在寻找一个不同的实现。
if (window !== undefined) {
const host = window.location.hostname;
if (host.includes('dev.')) {
env = 'DEV';
} else if (host.includes('int.')) {
env = 'INT';
} else if (host.includes('localhost') || host.includes('127.0.0.1')) {
env = 'LOCAL';
}
}
字符串
在nextjs的工作中,我编写了gerServerSideProps函数来获取这些细节。
export const getServerSideProps: GetServerSideProps<{requestUrlData: programServerSideProps}> = async (context: any) => {
const requestUrlData = await absoluteUrl(context.req);
return { props : {requestUrlData} }
型
}
如何在函数中访问这个requestUrlData数据,而不作为props通过许多子组件传递?
1条答案
按热度按时间rsl1atfo1#
您可以使用next的内置
useRouter
钩子访问完整的router
对象。要获取当前域,您应该在开发和生产环境中将其设置为前缀为
NEXT_PUBLIC_
(NEXT_PUBLIC_DOMAIN
)的env变量。这个prexix允许您使用process.env['NEXT_PUBLIC_DOMAIN']
从浏览器访问变量