部署在AWS Elastic Beanstalk的Spring Boot+React应用路由异常

问题背景 #

已将整合Spring Boot与React的Web应用打包为单个WAR包部署至AWS Elastic Beanstalk（React构建产物已放置在target/classes/static目录）。本地运行该WAR包（localhost:8080）时功能正常，登录后可成功跳转至/articles页面；但部署到Elastic Beanstalk环境后，输入凭据登录时，React路由无法跳转到/articles，反而重新渲染登录页。

尝试过的解决方案：将React构建的index.html上传至AWS S3桶并配置静态网站托管（已启用托管，设置索引与错误文档均为index.html），但问题仍未解决。

相关配置与代码 #

pom.xml 构建产物复制插件配置 #

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-antrun-plugin</artifactId>
    <version>3.1.0</version>
    <executions>
        <execution>
            <phase>generate-resources</phase>
            <configuration>
                 <target>
                     <copy todir="${project.build.directory}/classes/static">
                         <fileset dir="${project.basedir}/client/build"/>
                     </copy>
                 </target>
            </configuration>
            <goals>
                <goal>run</goal>
            </goals>
        </execution>
    </executions>
</plugin>

App.js 路由配置 #

<BrowserRouter>
    <Routes>
        <Route path={'/'} element={<Navigate to="/logIn"/>} />
        <Route path={'/articles'} element={<PrivateRoute><Articles/></PrivateRoute>}/>
    </Routes>
</BrowserRouter>

LogIn.tsx 登录逻辑 #

const handleLogIn = async () => {
        return logIn('logIn', user)
            .then((response) => {
                if (response.error) {
                    setError('Invalid userName or password.');
                    return;
                }
                console.log('LogIn successful: ', response);
                setCookie('jwt', response.jwt);
                navigate('/articles');
                console.log("go to /articles");
            })
            .catch((error) => {
                console.error('LogIn failed with error: ', error.response ? error.response.data : error.message);
                setError('Invalid userName or password.');
                return;
            })
    }

PrivateRoute.tsx 私有路由校验 #

function PrivateRoute(props: {children: React.ReactNode}) {
    const { children } = props;
    const isLoggedIn: boolean = getJWT('jwt') !== null;
    const location = useLocation()

    return isLoggedIn ? (
        <> {children} </>
    ) : (
        <Navigate
            replace={true}
            to="/logIn"
            state={{ from: `${location.pathname}${location.search}` }}
        />
    )
}

AWS S3静态网站托管配置 #

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