在浏览器中测试地理位置时出错

Question

我正在尝试在我的应用程序中使用地理定位 API。幸运的是，我在 MDN website 找到了一个我想使用的，但是当我尝试测试地理定位对象（如果它存在于浏览器中）时，我得到了这个错误：

Server Error
ReferenceError: navigator is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source pages/index.js (24:20) @ eval
  22 | }
  23 | 
> 24 | if('geolocation' in navigator) {
     |                    ^
  25 |   console.log('It does exist')
  26 | } else {
  27 |   console.log('doesn't exist')

这是我尝试实现的代码（来自 MDN 文档网站）：

if('geolocation' in navigator) {
  /* geolocation is available */
} else {
  /* geolocation IS NOT available */
}

你能告诉我我做错了什么以及如何解决吗？

Answer 1

服务器上没有 window 对象。当你想使用 window 对象时，你需要在 client 端进行。所以在你的反应组件中，你需要使用 useEffect 因为这个函数在浏览器中只有运行s.

useEffect(()=>{
  if('geolocation' in navigator) {
    /* geolocation is available */
  } else {
    /* geolocation IS NOT available */
  }
},[])

useEffect里面的函数会运行当组件在浏览器中挂载时

在浏览器中测试地理位置时出错

Getting error while testing for geolocation in the browser

javascript

geolocation

reactjs

next.js