Конфигурация статического маршрута приложений Azure с помощью React Router

Question

Я пытаюсь настроить статическое приложение на лазурном сервере и не могу правильно выполнить маршрутизацию. Когда я перейду к /lti/login/в приложении работает нормально. Но если я обновляюсь, он выдает 404, что говорит мне, что мой неправильно настроен (возможно). Я надеюсь, что кто-то сможет пролить свет на это.

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>

Answer 1

Что касается использование маршрутов не рекомендуется:

routes.json, который ранее использовался для настройки маршрутизации, устарел. Используйте staticwebapp.config.json, как описано в этой статье, чтобы настроить маршрутизацию и другие параметры для вашего статического веб-приложения.

теперь вам нужно добавить раздел navigationFallback в staticwebapp.config.json вот так:

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

Answer 2

Следуя последней «конфигурации статических веб-приложений Azure» , я сделал один пример конфигурации для React, развернутого в статических веб-приложениях Azure: 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"
    }
  }

Answer 3

Для реагирования вам нужно, чтобы он обслуживал файл index.html.

Вот пример 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"
  }
}