CODEWITHSUNDEEP
reactjsazure-static-web-appazure-static-website-routing
Snoopy
Snoopy

Reputation: 1357

Azure Static App Route configuration with React Router

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>

Upvotes: 17

Views: 14180

Answers (3)

EladTal
EladTal

Reputation: 2856

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

Upvotes: 23

long
long

Reputation: 125

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"
    }
  }

Upvotes: 7

svict4
svict4

Reputation: 530

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"
  }
}

Upvotes: 0

Related Questions