Title: Continuous Loading and Rendering Issue in React Application (Deployment)

Question

Title: Continuous Loading and Rendering Issue in React Application

Problem: I am facing a continuous loading and rendering issue in my React application. When accessing the /xcs route, two screens appear together, and the page keeps reloading indefinitely.

Background:

I have set the "homepage" field in my package.json file to "/xcs". The web.config file on the server is configured with a rewrite rule to handle the /xcs path. I have a component in my React code that matches the /xcs path and renders the component. Expected Behavior: I expect the login page to be rendered once and not continuously reload.

Code snippets:

web.config:

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/xcs" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

package.json:

{
    "name": "card-management",
    "version": "0.1.0",
    "private": true,
    "homepage": "/xcs",
    ...
}

React Code:

import { Routes, Route } from "react-router-dom";
import Login from "@pages/Login";

function App() {
    return (
        <Routes>
            <Route path="/xcs" element={<Login />} />
            ...
        </Routes>
    );
}

Steps taken to troubleshoot:

Checked for any conflicting routes or duplicate route definitions in the React application. Verified the implementation of the component for any logic issues. Reviewed the server-side routing configuration in the web.config file to ensure the rewrite rule for /xcs is correctly set. Ensured there are no conflicting server-side rules or configurations that could interfere with the application's functionality. Cleared the browser cache to eliminate any cached data causing conflicts. Despite these steps, the issue persists, and the continuous loading and rendering problem remains.

Question: Can anyone help me identify the cause of the continuous loading and rendering issue in my React application? What other steps can I take to resolve this problem? Any insights or suggestions would be greatly appreciated.