Azure Static App Route configuration with React Router

Question

I am attempting to configure a static app on azure and am struggling to route correctly. When I navigate to /lti/login/ within the app it works fine. But if I refresh it throws a 404, which tells me that my routes.json isn't setup correctly (maybe). I am hoping someone can shine some light on this.

routes.json

{
    "routes": [
      {
        "route": "/",
        "serve":"/"
  
      },
      {
        "route": "/lti/login/*",
        "serve":"/lti/login"

      }
     
    ]
  
  }

App.js

   <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/lti/login/">About</Link>
          </li>
        </ul>

        <hr />

        {/* A <Switch> looks through its children <Route>s and
          renders the first one that matches the current URL. */}
        <Switch>
          <Route exact path="/">
            <Form />
          </Route>
          <Route path="/lti/login/*"> <----- If I navigate to this within the app and then refresh it throws a 404. 
            <About />
          </Route>
        </Switch>
      </div>
    </Router>

Did any of the answers work for you?

Daniel Guldberg Aaes
– Daniel Guldberg Aaes

2022-04-12 07:50:45 +00:00
Commented Apr 12, 2022 at 7:50 — Daniel Guldberg Aaes
– Daniel Guldberg Aaes, Commented Apr 12, 2022 at 7:50

EladTal · Accepted Answer · 2021-09-27 16:58:21Z

23

As for the latest documentation the use of routes is deprecated:

routes.json that was previously used to configure routing is deprecated. Use staticwebapp.config.json as described in this article to configure routing and other settings for your static web app.

now you need to add navigationFallback section in staticwebapp.config.json like so:

{
"navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["*.{svg,png,jpg,gif}","*.{css,scss}","*.js"]
  }}

you can find the full documentation here:

https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#fallback-routes

answered Sep 27, 2021 at 16:58

EladTal

2,8961 gold badge21 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

long · Accepted Answer · 2021-09-14 11:43:32Z

Following latest "Azure Static Web Apps configuration", I did one config example for React deployed to Azure Static Web Apps: staticwebapp.config.json

{
    "routes": [
        {
            "route": "/admin",
            "allowedRoles": ["administrator"]
        }
    ],
    "navigationFallback": {
      "rewrite": "index.html",
      "exclude": ["/static/media/*.{png,jpg,gif,svg}", "/static/css/*"]
    },
    "responseOverrides": {
      "400": {
        "rewrite": "/invalid-invitation-error.html"
      },
      "401": {
        "redirect": "/login",
        "statusCode": 302
      },
      "403": {
        "rewrite": "/custom-forbidden-page.html"
      },
      "404": {
        "rewrite": "/404.html"
      }
    },
    "globalHeaders": {
      "content-security-policy": "default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'"
    },
    "mimeTypes": {
      ".json": "text/json"
    }
  }

svict4 · Accepted Answer · 2021-02-23 04:38:50Z

0

For react you need it to serve the index.html file.

Here's an example routes.json config:

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ],
  "platformErrorOverrides": [
    { "errorType": "NotFound", "serve": "/404" },
    {
      "errorType": "Unauthenticated",
      "statusCode": "302",
      "serve": "/login"
    }
  ],
  "mimeTypes": {
    "json": "application/json"
  }
}

answered Feb 23, 2021 at 4:38

svict4

5409 silver badges25 bronze badges

Collectives™ on Stack Overflow

Azure Static App Route configuration with React Router

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related