登录成功未跳转问题：React Router useSearchParams用法咨询

核心问题分析 #

1. redirect参数获取错误：当前代码中search.split("=")的处理逻辑完全错误，无法正确提取跳转目标路径。
2. useEffect依赖项冗余：searchParams和setSearchParams无需加入依赖列表，反而可能引发不必要的重复渲染。
3. 输入框未清空：登录成功后未重置email和password的状态，导致输入框残留用户信息。
4. 默认跳转路径错误：默认值设为1会跳转到不存在的/1页面，应改为首页路径/。

代码修改方案 #

1. 修正redirect参数获取逻辑 #

将LoginScreen.js中的redirect获取代码替换为：

const redirect = searchParams.get("redirect") || "/";

直接通过searchParams.get("参数名")提取跳转路径，默认值设为首页/，符合业务需求。

2. 优化useEffect的逻辑与依赖项 #

修改LoginScreen.js中的useEffect部分：

useEffect(() => {
  if (userInfo) {
    navigate(redirect);
    // 清空输入框绑定的状态
    setEmail("");
    setPassword("");
  }
}, [navigate, userInfo, redirect]);

• 移除searchParams和setSearchParams依赖：redirect已是从searchParams派生的固定值，当searchParams变化时redirect会自动更新，无需重复监听。
• 登录成功后重置email和password状态，确保输入框内容被清空。
• 取消setSearchParams调用：跳转后登录页不再显示，修改当前页面的搜索参数没有意义。

3. 确认Redux状态更新逻辑 #

确保login action执行成功后，对应的reducer正确更新userInfo状态，示例逻辑如下：

// 示例userLoginReducer代码
const userLoginReducer = (state = {}, action) => {
  switch (action.type) {
    case "LOGIN_SUCCESS":
      return { loading: false, userInfo: action.payload };
    case "LOGIN_FAIL":
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};

关键知识点说明 #

• useSearchParams正确用法：用于读取/修改当前URL的查询参数，获取特定参数直接使用get("key")即可，无需手动解析search字符串。
• useEffect依赖项原则：只添加会影响副作用逻辑的变量，派生值无需重复加入依赖，避免不必要的组件重渲染。

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