React+Azure：不使用state参数时如何保留重定向URI查询参数？

Azure端配置调整 #

• Azure AD认证保留原始请求参数：在Azure AD应用注册的认证流程中，确保state参数包含用户访问的完整原始URL（含查询参数）。用户触发登录时，Azure AD会将该URL存入state，登录完成重定向回应用时，可通过解析state恢复原始参数。
• App Service路由规则配置：若应用部署在Azure App Service，需修改路由规则确保重定向到SPA入口页时保留查询参数。以Windows环境的web.config为例，在rewrite规则中添加appendQueryString="true"：

<rule name="SPA" stopProcessing="true">
  <match url=".*" />
  <conditions logicalGrouping="MatchAll">
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
  </conditions>
  <action type="Rewrite" url="/APP/ui/index.html" appendQueryString="true" />
</rule>

• 静态Web Apps重定向设置：若使用Azure静态Web Apps，在staticwebapp.config.json中配置路由时开启preserveQueryString：

{
  "routes": [
    {
      "route": "/ui/*",
      "serve": "/ui/index.html",
      "statusCode": 200,
      "preserveQueryString": true
    }
  ]
}

React端代码优化 #

• 登录回调恢复原始参数：在处理Azure AD登录回调的组件中，解析state中的原始URL，提取查询参数并更新路由：

import { useSearchParams, useNavigate } from 'react-router-dom';
import { useEffect } from 'react';

const LoginCallback = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  useEffect(() => {
    const state = searchParams.get('state');
    if (state) {
      const originalUrl = decodeURIComponent(state);
      const urlObj = new URL(originalUrl);
      navigate({
        pathname: urlObj.pathname,
        search: urlObj.search
      });
    }
  }, [searchParams, navigate]);

  return <div>登录中...</div>;
};

• 组件挂载时读取查询参数：在目标页面组件中，确保挂载时主动读取查询参数，而非仅依赖动态设置场景：

import { useSearchParams } from 'react-router-dom';
import { useEffect } from 'react';

const ItemsPage = () => {
  const [searchParams] = useSearchParams();
  
  useEffect(() => {
    const ids = searchParams.get('ids');
    if (ids) {
      const parsedIds = JSON.parse(decodeURIComponent(ids));
      // 后续业务逻辑：根据parsedIds请求对应数据
    }
  }, [searchParams]);

  return <div>项目列表</div>;
};

• 升级react-router-dom版本：确保使用react-router-dom v6及以上稳定版，旧版本的useSearchParams存在参数处理的已知问题，升级可规避此类bug。

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