使用 React 路由器的 Azure 静态应用程序路由配置答案

【问题标题】：Azure Static App Route configuration with React Router使用 React 路由器的 Azure 静态应用程序路由配置
【发布时间】：2021-05-12 13:43:39
【问题描述】：

我正在尝试在 azure 上配置静态应用程序，并且正在努力正确路由。当我在应用程序中导航到/lti/login/ 时，它工作正常。但是如果我刷新它会抛出 404，这告诉我我的routes.json 设置不正确（可能）。我希望有人能对此有所了解。

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>

【问题讨论】：

标签： reactjs azure-static-web-app azure-static-website-routing

【解决方案1】：

至于latest documentation，不推荐使用路由：

以前用于配置路由的routes.json 已弃用。使用本文所述的 staticwebapp.config.json 为您的静态 Web 应用配置路由和其他设置。

现在您需要在 staticwebapp.config.json 中添加 navigationFallback 部分，如下所示：

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

您可以在此处找到完整的文档：

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

【讨论】：

【解决方案2】：

按照最新的"Azure Static Web Apps configuration"，我为部署到 Azure 静态 Web 应用程序的 React 做了一个配置示例： 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"
    }
  }

【讨论】：

【解决方案3】：

为了做出反应，您需要它来提供 index.html 文件。

这是一个示例 routes.json 配置：

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

【讨论】：