2

I have defined all my routes in App.js file, given below

<BrowserRouter>
  <Routes>
    {user && <Route path="/dashboard" element={<Dashboard />} />}
    <Route path='/' element={<SignUp />} />
    <Route path='/signin' element={<Signin />} />
    <Route path='/dashboard' element={<Navigate replace to="/signin" />} />
  </Routes>
</BrowserRouter>

The first component is only rendered if there is a user object defined. It defines the path /dashboard and renders the Dashboard component.

The second <Route> component defines the path / and renders the SignUp component.

The third <Route> component defines the path /signin and renders the Signin component.

The fourth <Route> component also defines the path /dashboard, but in this case, it uses the Navigate component to redirect the user to the /signin path. The replace attribute is used to replace the current route in the history stack, and the to attribute is used to define the path to redirect to.

In development it was working fine with all the routing but when deployed to Azure Static Web Apps it is showing 404 page not found. I have attached the image below which is for the URL https://agreeable-coast-05611e900.2.azurestaticapps.net/dashboard

404: Not found page

I have hosted all the projects in GitHub feel free to check it out.

Server - https://github.com/Somanyu/finproject-server

Client - https://github.com/Somanyu/finproject-client

Protonic
  • 41
  • 8
  • 1
    The server should be configured to serve the root index.html file for all page requests into the React app. This is so the React app is mounted and can handle matching and rendering the appropriate route. See the CRA [deployment docs](https://create-react-app.dev/docs/deployment/) for a general idea how different server environments are configured/setup/etc. – Drew Reese Feb 25 '23 at 04:55
  • 2
    Thanks for the suggestions. The routing problem has been fixed using `staticwebapps.config.json`. – Protonic Feb 25 '23 at 05:01
  • @Protonic Post your solution as an answer so that it can help other community members with the same type of issue. – Naveen Sharma Mar 03 '23 at 05:28
  • @Protonic how did you solved it please answer you question so that everyone can benefit from it. – Abdellah Slimani Apr 23 '23 at 11:04

1 Answers1

2

[Solution]

The issue was because of the staticwebapps.config.json file which is a configuration file used by Azure Static Web Apps. It contains settings that configure the behavior of the static web app when it's deployed and running on the Azure platform.

As ReactJS is a single-page application (SPA), and all navigation is handled by JavaScript. By default, if a user navigates to a non-existent route, the server would return a 404 error. With this setting, Azure ensures that all navigation requests get rewritten to the index.html file, which will then load the React app and handle the routing.

So you must add navigationFallback config to the staticwebapps.config.json which tells Azure to rewrite all navigation requests to the index.html file, which is the entry point of your React app.

staticwebapps.config.json file

{
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "globalHeaders": {
    "Access-Control-Allow-Origin": "https://<YOUR PROJECT>.azurewebsites.net",
    "Access-Control-Allow-Methods": "POST, GET, OPTIONS"
  }
}
Protonic
  • 41
  • 8