React应用LinkedIn登录上线后跳转404，本地运行正常

我开发了一个简单的React应用，正在集成LinkedIn登录功能。本地localhost环境下功能完全正常，但部署上线后，登录弹窗能正常弹出，完成登录操作后会跳转到404页面，不过URL中已经包含了token信息。

我使用react-linkedin-login-oauth2包作为基础实现，尝试过hooks和props两种写法，二者在本地测试均无问题，但上线后都出现相同的跳转404问题。我已经反复确认LinkedIn开发者中心里的“Authorized redirect URLs for your app”配置正确。

以下是我的代码：

App.js #

import React, { useEffect } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";

import { LinkedInCallback } from "react-linkedin-login-oauth2";
import LinkedInPage from "./LoginPage";

import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  useEffect(() => {
    document.title="Push"
  })

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/linkedin" element={<LinkedInCallback />} />
        <Route path="/" element={<LinkedInPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

LoginPage.js #

import React, { useState } from "react";
import { LinkedIn } from "react-linkedin-login-oauth2";
import linkedin from "react-linkedin-login-oauth2/assets/linkedin.png";
import { Button, Card, Col, Container, Row } from "react-bootstrap";

function LoginPage() {
  const [name, setName] = useState()
  const [email, setEmail] = useState()

  const [code, setCode] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  return (
    <Container className="">
                    <LinkedIn
                      clientId="86f2j1y6awao41"
                      redirectUri={`${window.location.origin}/linkedin`}
                      onSuccess={(code) => {
                        console.log(code);
                      }}
                      onError={(error) => {
                        console.log(error);
                      }}
                    >
                      {({ linkedInLogin }) => (
                        <img
                          onClick={linkedInLogin}
                          src={linkedin}
                          alt="Sign in with Linked In"
                          style={{ maxWidth: '180px', cursor: 'pointer' }}
                        />
                      )}
                    </LinkedIn>
    </Container>
  );
}

export default LoginPage;

package.json #

{
  "name": "linkedin-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "^5.2.3",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0",
    "react-linkedin-login-oauth2": "^2.0.1",
    "react-router-dom": "^6.11.1",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

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