使用react-router渲染404页面来反应PWA：create-react-app

Question

仅当我将PWA添加到主屏幕并从那里运行应用程序时才会发生这种情况。 当我在移动或桌面浏览器上运行应用程序时，我没有看到这种行为。

我正在使用create-react-app构建的React应用程序 。 运行npm run build并使用任何本地http-server提供服务后，它运行正常。 一旦我将其部署到Firebase或now并在Firefox或Chrome移动浏览器上打开网站，它似乎也能正常工作。 但是，当我点击弹出窗口中的“添加到主屏幕”按钮时，它会被添加，但是从主屏幕图标打开它会呈现404路线。

如果没有路径匹配URL，我使用react-router的<Switch/>组件路由到自定义404页面。 以下是我定义路由器“配置”的方法：

<Router>
    <Switch>
      <Route exact path="/" component={Login} />
      <Route path="/login" component={Login} />
      <Route path="/sign-up" component={SignUp} />
      <Route 
        render={() => (
        <div>
          <h1>Error 404: Not Found</h1>
          <Link to="/">Go Home</Link>
        </div>)}
      />
    </Switch>
</Router>

package.json的软件包版本：

• react ：^ 16.2.0
• react-scripts ：1.1.0
• react-router-dom ：^ 4.2.2

Answer 1

这样做的原因是，当从主屏幕打开应用程序时，它会查找由create-react-app创建的manifest.json文件中提到的./index.html路由。 此路径与路由器配置中的任何路由都不匹配，因此它呈现404页面。 如果没有创建404页面，则会显示空白页面，因为所有路径都将返回null。

如果您在浏览器上手动访问URL，则可以观察到相同的行为： https ： //website.com/index.html 。 该应用程序将呈现空白页面或404页面（如果您创建了一个页面）。

要解决此问题，请更改manifest.json文件中的start_url字段，如下所示：

{
  ...
  start_url: "/"
}

现在，当应用程序从主屏幕启动时，它将查找'/'路径而不是'/index.html' 。