Search code examples
reactjsazure-static-web-appazure-static-web-app-routing

Enable Routing in React static web app after deployment

I have a static web app (React/Typescript) with the following routes/pages:

index.ts

ReactDOM.render(
  <ThemeProvider>
    <React.StrictMode>
      <Provider store={store}>
        <BrowserRouter>
          <Routes>
            <Route path="" element={<App />}>
              <Route path="/" element={<JobsPage />} />
              <Route path="/JobDetails" element={<JobDetails />} />
              <Route path="/OwnerPage" element={<OwnerPage />} />
              <Route path="/AdminConfig" element={<AdminConfig />} />
              <Route path="/ManageMembership" element={<ManageMembership />} />
            </Route>
          </Routes>
        </BrowserRouter>
      </Provider>
    </React.StrictMode>
  </ThemeProvider>,
  document.getElementById('root')
);

On running locally, I can go to these pages directly. For example, "localhost:3000/ManageMembership" takes me to ManageMembership page. After deployment, "abc.com/ManageMembership" is showing "Not Found". It's not redirecting to ManageMembership page. But, if I click a button on the UI, I see the URL set to abc.com/ManageMembership. If I try to access this URL directly instead via clicking button, it shows "Not Found". What am I missing and how do I fix this?

Solution

  • I created a sample React.js application, deployed it to Azure Static Web Apps, and successfully redirected to the specific route.

    • To fix the page not founderror , I've added a staticwebapp.config.json file in the root directory of the project.
    • It works fine locally, but in production, a staticwebapp.config.json file is required to handle routes.
    • It allows you to configure routing, authentication, and authorization for your apps on Azure.

    Please add the below staticwebapp.config.json file in your project directory.

    {
"routes": [
{
"route": "/api/*",
"allowedRoles": ["anonymous", "authenticated"]
},
{
"route": "/",
"serve": "/index.html",
"statusCode": 200
},
{
"route": "/JobsPage",
"serve": "/index.html",
"statusCode": 200
},
{
"route": "/ManageMembership",
"serve": "/index.html",
"statusCode": 200
},
{
"route": "/JobDetails",
"serve": "/index.html",
"statusCode": 200
},
{
"route": "/OwnerPage",
"serve": "/index.html",
"statusCode": 200
},
{
"route": "/AdminConfig",
"serve": "/index.html",
"statusCode": 200
}
],
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/api/*"]
}
}

    My index.tsx:

    import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';
import JobsPage from './pages/JobsPage';
import ManageMembership from './pages/ManageMembership';
import JobDetails from './pages/JobDetails';
import OwnerPage from './pages/OwnerPage';
import AdminConfig from './pages/AdminConfig';

ReactDOM.render(
  <BrowserRouter>
    <Routes>   
      <Route path="/" element={<App />}>
        <Route path="JobsPage" element={<JobsPage />} />
        <Route path="ManageMembership" element={<ManageMembership />} />
        <Route path="JobDetails" element={<JobDetails />} />
        <Route path="OwnerPage" element={<OwnerPage />} />
        <Route path="AdminConfig" element={<AdminConfig />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);

    My index.html file:

    <!DOCTYPE  html>
<html  lang="en">
<head>
<meta  charset="utf-8"  />
<link  rel="icon"  href="%PUBLIC_URL%/favicon.ico"  />
<meta  name="viewport"  content="width=device-width, initial-scale=1"  />
<meta  name="theme-color"  content="#000000"  />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link  rel="apple-touch-icon"  href="%PUBLIC_URL%/logo192.png"  />
<link  rel="manifest"  href="%PUBLIC_URL%/manifest.json"  />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div  id="root"></div>
</body>
</html>

    I've successfully deployed the application to Azure static web app via Github actions. enter image description here

    Local output: enter image description here

    Output after deployment: enter image description here