React PWA：create-react-app 使用 react-router 渲染 404 页面答案

【问题标题】：React PWA: create-react-app using react-router renders 404 pageReact PWA：create-react-app 使用 react-router 渲染 404 页面
【发布时间】：2018-07-11 15:29:54
【问题描述】：

仅当我将 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

【问题讨论】：

标签： javascript reactjs react-router create-react-app progressive-web-apps

【解决方案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'。

【讨论】：