使用 React Router 的 Azure 静态应用路由配置

问题描述

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

解决方法

对于 react，你需要它来提供 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"
  }
}