React路由接收查询参数的Nginx配置：SSO重定向后路由捕获处理

一、Nginx配置（核心：让路由请求交给React处理） #

React是单页应用（SPA），默认Nginx会把/my-route这类路径当成静态文件查找，导致404。必须配置Nginx，让所有非静态资源的请求都转发到index.html，才能让React Router接管路由逻辑。

修改Nginx的server配置块，添加以下规则：

server {
    listen 80;
    server_name my-react; # 你的域名或服务器IP

    root /path/to/your/react/build; # React打包后的dist/build目录路径
    index index.html;

    # 处理静态资源（CSS、JS、图片等），设置缓存优化加载
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 核心规则：所有非静态资源请求都指向index.html，交给React Router处理
    location / {
        try_files $uri $uri/ /index.html;
    }
}

二、React代码处理（捕获路由+解码SSO响应） #

1. 配置React Router的BrowserRouter #

在项目根组件（比如App.jsx）中，用BrowserRouter包裹所有路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MyRouteComponent from './components/MyRouteComponent';

function App() {
  return (
    <Router>
      <Routes>
        {/* 对应SSO跳转的目标路由 */}
        <Route path="/my-route" element={<MyRouteComponent />} />
        {/* 其他业务路由... */}
      </Routes>
    </Router>
  );
}

export default App;

2. 在目标路由组件中解析并解码参数 #

在MyRouteComponent里，用useSearchParams钩子获取URL中的response参数，完成Base64解码：

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

function MyRouteComponent() {
  const [searchParams] = useSearchParams();
  const [decodedData, setDecodedData] = useState(null);

  useEffect(() => {
    const responseParam = searchParams.get('response');
    if (responseParam) {
      try {
        // 处理URL安全的Base64（替换特殊字符）
        const safeBase64 = responseParam.replace(/-/g, '+').replace(/_/g, '/');
        // Base64解码
        const decodedStr = atob(safeBase64);
        // 转成JSON对象（如果SSO返回的是JSON格式）
        const responseData = JSON.parse(decodedStr);
        setDecodedData(responseData);
        
        // 这里可以添加后续逻辑：比如存储认证信息、跳转首页等
      } catch (err) {
        console.error('SSO响应解码失败:', err);
      }
    }
  }, [searchParams]);

  return (
    <div>
      {decodedData ? (
        <div>
          <h3>认证成功</h3>
          <pre>{JSON.stringify(decodedData, null, 2)}</pre>
        </div>
      ) : (
        <div>处理中...</div>
      )}
    </div>
  );
}

export default MyRouteComponent;

3. 按钮跳转SSO的代码示例 #

在触发登录的按钮组件中，构造正确的跳转URL：

function SSOLoginButton() {
  const handleLogin = () => {
    // 构造ssotarget：当前应用的/my-route地址
    const ssotarget = `${window.location.origin}/my-route`;
    // 跳转到SSO登录页，注意对参数编码避免乱码
    window.location.href = `http://sso-url.com/login?ssotarget=${encodeURIComponent(ssotarget)}`;
  };

  return <button onClick={handleLogin}>SSO登录</button>;
}

export default SSOLoginButton;

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