6

我正在尝试在 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>
4

3 回答 3

4

至于最新的文档，不推荐使用路由：

以前用于配置路由的 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

于 2021-09-27T16:58:21.870 回答
2

在最新的“Azure 静态 Web 应用配置”之后，我为部署到 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"
    }
  }
于 2021-09-14T11:43:32.563 回答
0

为了做出反应，您需要它来提供 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"
  }
}
于 2021-02-23T04:38:50.820 回答