如何在Remix中获取用户地理位置参数？

你的问题核心来自三个点：服务端渲染时无navigator对象导致初始渲染错误、异步定位操作未用状态管理，组件无法正确渲染结果、组件调用方式不符合React规范，下面一步步修复：

1. 修复组件调用方式 #

直接调用MyComponent()是错误的，React组件必须用JSX标签渲染：

<Suspense fallback={<div>Loading</div>}>
  <MyComponent /> {/* 用标签替代直接调用函数 */}
</Suspense>

2. 重构定位组件逻辑（解决闪烁+正确获取位置） #

Remix的服务端环境没有navigator，所以服务端渲染时会进入else分支返回“不支持”提示，客户端hydrate时又切换到if分支，导致闪烁。同时getCurrentPosition是异步操作，必须用React状态管理定位的加载、成功、失败三个阶段：

import { useState, useEffect } from "react";

const MyComponent = () => {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 仅在客户端执行定位逻辑
    if (!navigator.geolocation) {
      setErrorMsg("Geolocation is not supported by this browser");
      setIsLoading(false);
      return;
    }

    // 定位成功回调
    const onSuccess = (position) => {
      setLocation({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      });
      setIsLoading(false);
    };

    // 定位失败回调
    const onError = (err) => {
      setErrorMsg(err.message);
      setIsLoading(false);
    };

    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  }, []);

  if (isLoading) {
    return <div>Getting your location...</div>;
  }

  if (errorMsg) {
    return <div>{errorMsg}</div>;
  }

  if (location) {
    return <div>Latitude: {location.latitude}, Longitude: {location.longitude}</div>;
  }

  return null;
};

export default MyComponent;

3. 可选：用Remix专属方式确保组件仅在客户端渲染 #

可以借助remix-utils的clientOnly组件，让定位逻辑完全避开服务端渲染，彻底消除SSR带来的不一致问题：

import { clientOnly } from "remix-utils";

// 封装成客户端专属组件
const ClientOnlyLocation = clientOnly(() => import("./MyComponent"));

// 页面中使用
<Suspense fallback={<div>Loading location component...</div>}>
  <ClientOnlyLocation />
</Suspense>

后续扩展：携带经纬度重载页面 #

如果要实现获取位置后跳转并携带参数，可在定位成功回调里添加导航逻辑：

// 用原生方式跳转
window.location.href = `/your-target-route?lat=${location.latitude}&lon=${location.longitude}`;

// 或者用Remix的useNavigate API（需在组件内引入useNavigate）
import { useNavigate } from "@remix-run/react";
const navigate = useNavigate();
navigate(`/your-target-route?lat=${location.latitude}&lon=${location.longitude}`);

内容的提问来源于stack exchange，提问作者josephkibe