时间戳

首页 > 解决方案 > 使用 React 路由器的 Azure 静态应用程序路由配置

reactjs - 使用 React 路由器的 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>

标签： reactjsazure-static-web-appazure-static-website-routing

解决方案

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

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

推荐阅读