只有当我将 PWA 添加到主屏幕并从那里运行应用程序时才会发生这种情况。我在运行移动或桌面浏览器上的应用程序。
我正在开发一个使用 create-react-app 构建的 React 应用程序.运行 npm run build
后工作正常并使用任何本地 http 服务器提供服务。一旦我将它部署到 Firebase 或 now
,它似乎也能正常工作并在 Firefox 或 Chrome 移动浏览器上打开网站。但是,当我点击弹出窗口中的“添加到主屏幕”按钮时,它会被添加,但是从主屏幕图标打开它会呈现 404 路由。
我使用了 react-router 的 <Switch/>
如果没有路径与 URL 匹配,组件将路由到自定义 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
最佳答案
原因是当应用程序从主屏幕打开时,它会查找 manifest.json
文件中提到的 ./index.html
路由由 create-react-app 创建。此路径与路由器配置中的任何路由都不匹配,因此呈现 404 页面。如果没有创建 404 页面,则会显示一个空白页面,因为所有路由都将返回 null。
如果您在浏览器中手动访问 URL,您可以观察到相同的行为:https://website.com/index.html .该应用程序将呈现一个空白页面或一个 404 页面(如果您创建了一个页面)。
为了解决这个问题,请更改 manifest.json
文件中的 start_url
字段,如下所示:
{
...
start_url: "/"
}
现在当应用程序从主屏幕启动时,它将查找 '/'
路径而不是 '/index.html'
。
关于javascript - react PWA : create-react-app using react-router renders 404 page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48560507/