Description:

I am working on a React project using the Vite template. The routing works perfectly in the local environment, but when deployed to an Azure web app, the routing fails to work as expected. Specifically, navigating to any route other than the root results in a 404 Not Found error.

Here’s my routing setup in RoutesComponent.tsx:

import React, { FunctionComponent } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Main from './components/Main';
import PlaceOrder from './components/PlaceOrder';
import ErrorPage from './components/ErrorPage';

interface RoutesComponentProps {
    userInformation: any;
}

const RoutesComponent: FunctionComponent<RoutesComponentProps> = ({ userInformation }) => {
    return (
        <BrowserRouter basename="/">
            <Routes>
                <Route path="/" element={<Main userInformation={userInformation} />} />
                <Route path="/ordersuccess" element={<PlaceOrder />} />
                <Route path="/orderfailed" element={<ErrorPage />} />
                <Route path="*" element={<Navigate to="/" />} />
            </Routes>
        </BrowserRouter>
    );
};

export default RoutesComponent;

After deploying to Azure, navigating to the URL:

https://app-dev-employeestore.azure.net/ordersuccess?id=cs_854889bd3e&invoice=788874818&customer=cust-897

results in a 404 error.

To handle the routing, I added the following web.config file in the public root directory:

<?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="/" />
                </rule>
            </rules>
        </rewrite>
        <staticContent>
            <mimeMap fileExtension=".otf" mimeType="font/otf" />
        </staticContent>
    </system.webServer>
</configuration>

Despite this configuration, the routing still does not work correctly.

Any suggestions on how to fix this routing issue?