如何使用Remix Forms实现正确重定向？下拉选择跳转异常求助

核心问题与修复步骤 #

• 下拉框name属性不匹配：你的<select>标签name设为了location，但后端action函数里是通过body.get("continent")获取值，导致无法拿到选中的大陆slug，跳转路径错误。
• State键名大小写不一致：setState({ Continent: event.target.value })用了大写的Continent，但params和value={state.continent}用的是小写，导致下拉框选中状态无法正确同步。
• 跳转路径缺少根路径前缀：redirect(location)中如果location是north-america，会生成相对路径，需要改为绝对路径/${location}才能正确跳转到/north-america。

修正后的关键代码片段 #

1. 修正Action函数

export async function action({ request }: ActionArgs) {
  const body = await request.formData();
  const continent = body.get("continent") as string;
  const country = body.get("country") as string;
  const region = body.get("region") as string;

  // 生成绝对路径
  let location = "/";
  if (continent) {
    location = `/${continent}`;
  } else if (country) {
    location = `/${country}`;
  } else if (region) {
    location = `/${region}`;
  }
  return redirect(location);
}

2. 修正下拉框组件

<Form method="post" onChange={handleChange}>
  {/* Continent Selector */}
  <div className="mx-auto flex max-w-7xl py-10 sm:px-4 lg:px-4">
    <div className="flex-auto pr-10">
      <label
        htmlFor="continent"
        className="block text-sm font-medium text-gray-700"
      >
        Continent
      </label>
      <select
        id="continent"
        title="continent"
        name="continent" {/* 修正name属性 */}
        className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
        value={state.continent}
        onChange={(event) =>
          setState({ continent: event.target.value }) {/* 修正键名为小写 */}
        }
      >
        <option value="">Select a continent...</option>
        {data.continents?.map((continent, index) => (
          <option value={continent.slug} key={index}>
            {continent.name}
          </option>
        ))}
      </select>
    </div>
  </div>
</Form>

3. 优化State与URL参数同步

建议添加useEffect同步params变化，避免State和URL参数不一致：

const [state, setState] = useState(params);

useEffect(() => {
  setState(params);
}, [params]);

额外说明 #

• 选中北美后，页面会跳转到/north-america，此时params.continent会被设置为north-america，通过useEffect同步到State，下拉框就能保持选中状态。
• 要实现国家下拉框联动，可在loader中根据当前params.continent过滤对应国家数据，或者在前端根据选中的大陆slug筛选data.countries。

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