首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么托管在ZEIT上的Create React App现在没有显示404响应?

托管在ZEIT上的Create React App现在没有显示404响应的原因可能有以下几个方面:

  1. 路由配置问题:Create React App使用React Router来处理前端路由,如果没有正确配置路由或者路由配置有误,可能会导致页面无法正确匹配到对应的组件,从而出现404响应。可以检查路由配置是否正确,并确保路由路径与组件的对应关系正确。
  2. 静态资源路径问题:Create React App默认将静态资源打包到build文件夹中,并使用相对路径引用这些资源。如果在部署到ZEIT时,静态资源的路径没有正确配置或者没有正确引用,可能会导致页面无法加载静态资源而出现404响应。可以检查静态资源路径的配置是否正确,并确保在代码中正确引用这些资源。
  3. 服务器配置问题:ZEIT提供了Now平台来托管应用,可能需要在Now的配置文件中进行一些配置,以确保应用能够正确运行。例如,需要配置正确的路由规则、指定正确的入口文件等。可以参考ZEIT的官方文档或者使用ZEIT提供的CLI工具来进行配置。
  4. 缓存问题:有时候浏览器或者CDN会对静态资源进行缓存,如果之前访问过相同的URL并且缓存了404响应,那么再次访问时可能会继续返回404响应。可以尝试清除浏览器缓存或者使用无缓存的方式访问页面,例如在开发者工具中勾选"Disable cache"选项。

总结起来,托管在ZEIT上的Create React App没有显示404响应可能是由于路由配置问题、静态资源路径问题、服务器配置问题或者缓存问题导致的。需要仔细检查这些方面的配置,并确保正确引用相关资源和正确配置路由规则。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基于Github issues + umi 搭建一个免费带评论功能博客(二)

一篇文章我主要介绍了什么是Github App,以及如何利用GitHub App为我们repository进行授权,解决了博客数据存储和获取,那么这篇文章我将着重介绍博客搭建过程中用到前端技术...为什么是Umi 用过 React 同学应该很多人都知道 Umi (乌米)这个框架,没听过那么我也建议大家有时间可以去了解下它传送门。...,我们必须要使用 registerLanguage 方法来注册你想要高亮显示语言,同时 react-syntax-highlighter 提供了若干种代码高亮样式供我们使用,react-syntax-highlighter...如果选择 history路由,那么部署上线后,非根路径下刷新页面会报404错误。...npm init next-app my-next-project 4, 发布自己工程到zeit.co now 这种方式简单、易用,但是也存在一个弊端,就是第二步时候可能受制于网络问题,出现无法登录情况

56310

使用now.sh部署前端项目

now.sh是ZEIT推出一款全球化实时部署服务。ZEIT现在已经改名为Vercel。 网站地址:vercel.com Vercel 是一个云平台静态站点和无服务器功能完美地与您工作流程适合。...它使开发人员可以托管Jamstack网站和Web服务,这些网站和Web服务可立即部署,自动扩展且无需监督,而无需任何配置。 快速部署 使用now.sh部署一个React应用。...选择需要部署项目,如果没有可选仓库,需要先在github中设置访问权限。 ? 一般只选择自己要暴露出仓库就可以。然后点继续、继续、继续。。直到配置命令时候。 ?...本次部署React项目,会直接检测到,自动选择Create React App,然后配置打包命令等。这里打包命令设置为npm run build另外两个选项默认然后点击部署。...然后就会显示项目已经完成创建并正在部署。 ? 喝杯水/上个厕所/透个气/随便干点什么功夫,就已经部署好了。这时,左侧会显示出网站预览图,右侧显示出状态信息。 ?

1.3K30
  • React SSR 简介与 Next.js 使用入门

    传统服务端渲染通常用在文档型页面上,而现在网页被称为 web app,页面更像 app 应用,现在做服务器渲染主要是为了 SEO 和首屏。...而客户端渲染通常没有多少 HTML 代码,基本都是通过 js 动态生成。因此,如果是 React SSR,那么浏览器查看源码时,源码应该有比较多 HTML 代码,而前端渲染是没有的。 ?...而 next.js 是 react 官方提供 react ssr 框架,基本配置已经封装好了。使用时就像使用 create-react-app 一样。...第二种方式是使用下面的命令安装,这个命令就像 create-react-app 一样创建出完整项目目录: npx create-next-app project_name 路由 Link 页面级路由用...数据获取 next 中有一个 getInitialProps 方法,它在初始化组件 props 属性时被调用,而且只服务端运行,没有跨域限制。

    9.7K51

    使用ESLint + Prettier简化代码 Review 过程

    最近一个项目中,我们通过设置 ESLint 和 Prettier 来进行自动化语法检查,并对 JavaScript 项目的代码风格管理。 为什么自动 Lint 和代码风格很重要?...我喜欢它完成时给出一个提示,否则当没有错误时它会没有任何输出。...视频中,我简要介绍了 Zeit Now 酷炫之处。 Zeit Now 是一款出色托管服务,可与 GitHub 轻松集成,为你提供使用 serverless 技术端到端持续部署。...这就像拥有世界最好 DevOps 团队一样 —— 无需聘请全职开发人员来简化你持续交付流程。 Zeit 托管和开发时间大大降低了成本。...自动化 lint 和代码格式化可以提高开发人员工作效率,通过捕获错误和使开发人员保持一致,使你团队进行代码 review 时把精力集中更有意义和更高效事情。 尝试使用 Zeit Now。

    1.5K40

    React服务端渲染-next.js

    Next.js 是一个轻量级 React 服务端渲染应用框架。 熟悉React框架同学,如果有服务端渲染需求,选择Next.js是最佳决定。...服务器启动成功,但是打开localhost:3000,会报404错误。...利用脚手架:create-next-app npm init next-app # or yarn create next-app 如果想用官网模板,可以 https://github.com/zeit...hello-world-app # or yarn create next-app --example hello-world hello-world-app 下面,我们来看看Next有哪些与众不同地方...这时,你只能在特定页面(如果只有某个页面的某个接口需要鉴权),或者_app.js这个全局组件添加登录态判断:componentDidMount中调用登录态接口,并根据当前用户状态做是否重定向到登录页操作

    4K21

    手把手带你用next搭建一个完善react服务端渲染项目(集成antd、redux、样式解决方案)

    项目的初始化 首先安装 create-next-app 脚手架 npm i -g create-next-app 然后利用脚手架建立 next 项目 create-next-app next-github...css 文件,它默认为我们提供了一种 css in js 方案,所以我们要自己加入 next 插件包进行 css 支持 yarn add @zeit/next-css 如果项目根目录下没有的话...id=2 如果真的想显示成/b/2这种形式的话, 也可以通过Linkas属性来实现 <Link href="/a?.../<em>zeit</em>/styled… 需要注意<em>的</em>点是:组件内部<em>的</em> style 标签,只有<em>在</em>组件渲染后才会被加到 head 里生效,组件销毁后样式就失效。...yarn add <em>react</em>-redux 然后<em>在</em>_<em>app</em>.js 中用这个库提供<em>的</em> Provider 包裹在组件<em>的</em>外层 并且传入你定义<em>的</em> store import { Provider } from

    5.5K10

    Next.js 简明教程

    开发起来甚是畅滑,如果你喜欢React,又有同构需求,不妨由此文入手。 如果你应用需要兼容IE 9,10等浏览器,请出门左拐找找ejs等“传统”方式~~~ 为什么需要前端同构?...为什么需要现代前端同构框架? 现代点前端框架都有服务端渲染API,为什么我们还需要一个同构框架?...也就是使用它页面,如果是浏览器渲染你需要在组件内再显示地请求一次。开发体验不太好。 如果没有特殊问题,建议使用getServerSideProps替代getInitialProps方法。...,需要注意是: getStaticPaths方法返回fallback很有用:如果fallback是false,访问该方法没有返回路由会404 但是如果不想或者不方便在build阶段拿到路由参数,可以设置...上述app和document中使用getServerSideProps或者getInitialProps方法让整个应用都无法自动静态优化 上述app和document中浏览器中不执行,包括react

    3K20

    create-react-app迁移到Next.js

    本文中,我将引导您完成将React应用程序(Create-React-App: CRA)迁移到Next.js所采取步骤。 这非常简单,只需几个小时即可完成。...循序渐进:将CRA转换为Next.js 创建一个新Next.js项目 首先,终端中运行此命令以创建新应用程序: $ npx create-next-app 将组件放入Next.js项目: Next.js...路由:React vs Next.js 普通React要么呈现为真正单页应用程序(类似于网络电话应用程序),要么借助路由器组件呈现路由,而Next.js附带了内部路由机制。...Install @zeit/next-sass 项目的根目录创建一个文件next.config.js: const withSass = require('@zeit/next-sass'); module.exports...如您在本文中所见,这使得将React应用程序迁移到Next变得非常容易。 希望您现在应该至少本地拥有一个正在运行Next.js应用程序。

    6.1K40

    React 必学SSR框架——next.js

    客户端渲染:服务器端把模板和数据发送给客户端,渲染过程客户端完成。 为什么需要同构?...现代前端框架(react、vue、angular)都有服务端渲染API,为什么我们还需要一个同构框架?...也就是使用它页面,如果是浏览器渲染你需要在组件内再显示地请求一次。开发体验不太好。 如果没有特殊问题,建议使用getServerSideProps替代getInitialProps方法。...,需要注意是: getStaticPaths方法返回fallback很有用:如果fallback是false,访问该方法没有返回路由会404 但是如果不想或者不方便在build阶段拿到路由参数...上述app和document中使用getServerSideProps或者getInitialProps方法让整个应用都无法自动静态优化 上述app和document中浏览器中不执行,包括react

    7.6K20

    如何更好 react 中使用 axios 拦截器

    我之前 react 中处理 axios 封装一直没有找到很好方式,因为 axios 是非常独立,并且提供各种 api 都是一次性配置,例如 axios.create、axios.defaults...: 假如你 axios 封装是基于全局,那么 index.jsx 或者 App.jsx 挂载 useAjaxEffect 即可。...baseURL + "/404.html"; 复制代码 上述处理无疑不是粗糙且死板,你有可能没有拿到最新路由,又或者直接放弃了 React-Router 提供无刷新路由。...默认页面 DefaultPage 组件中,我们可以进行一次错误请求,请求会返回给我们 404 状态码,现在我们需要在 axios 中进行拦截,当请求出现 404 时,跳转到 /404 页面。...你现在可以尝试点击默认页中按钮,它会进行一个 404 请求,页面将重定向到 /404 页面。

    2.5K30

    Next.js 入门

    针对这些问题,Next.js提供了一个很好解决方案,使开发人员可以将精力放在业务,从繁琐配置中解放出来。下面我们一起来看看它一些特性。...cd hello-next npm init -y npm install --save react react-dom next mkdir pages package.json中输入以下内容: {...四、路由 Next.js 没有路由配置文件,路由规则跟 PHP 有点像。只要在 pages 文件夹下创建文件,都会默认生成以文件名命名路由。...以上面这个 url 为例子,直接在浏览器输入localhost:3000/p/12345是会返回404,我们需要自己实现服务端路由处理逻辑。下面以express为例子进行讲解。...,会调用app.render方法渲染页面,其它路由则调用app.getRequestHandler方法。

    6.5K20

    深入探讨 Web 开发中预渲染和 Hydration

    我们可以选择使用服务器或 Serverless 功能 SPA 可以托管静态 CDN ,如Netlify。...随着像Vite和Create React App这样工具链加入,用于自动化现代 JavaScript 应用程序设置,开发者们不再需要担心手动配置 Webpack。 实现 SPA 也存在一些缺点。...他们将看到一个有内容页面,而不是像使用 Vite 或 Create React App 时看到空白页面。 但有一个问题:用户收到 HTML 不是交互式。他们不能点击它或提交表单。...它加载使我们应用程序具有交互性 JavaScript。 React 中,“Hydration”是 React 如何“附着”到已经服务器环境中由 React 渲染现有 HTML 。...这就是会遇到错误: 通过 DevTool 我们可以看到服务器响应。它是一个空标签。 服务器响应如下: 但客户端加载 HTML 中写着“这个 p 标签将会显示”。

    13210

    React 应用中获取数据

    开始 让我们用 create-react-app 创建一个 React 应用框架: > create-react-app react-data-fetcher 我们会得到一个精致结构目录。...如果,你不熟悉 create-react-app,可以先看看 README 文件。 创建简单服务 我创建了一个简单 quotes 服务。... App 组件 render() 方法中,通过检查state.isFetching 值来决定是否显示提示信息。...例如,404 将会做为一个正常响应返回。你必须主动检查响应状态码并处理捕获网络异常。 因此你必须在两个地方处理错误。...最近几年中,React 越来越流行。事实,市场有很多可以供购买、审查、部署项目。 如果,你查找更多 React 资源,不要迟疑请看这里

    8.4K20

    React Router 6 (React路由) 最详细教程

    虽然网络React-Router 路由本身教程很多,但真正讲到 React-Router 6 并不多。...等等 如何安装 React-Router 安装 React-Router 非常简单,如果你使用是 yarn 或者 npm,则用通常安装方式即可 我们先用 create-react-app 脚手架建起一个...app 来 npx create-react-app react-router-6-tutorial 然后用 npm 安装 如果使用 npm 的话则是 npm install react-router-dom...它们区别是,后者包含了 react-native 中需要一些组件,如果你只需要做网页应用的话,用前者就可以了 React Router API React Router API 官方文档已经介绍得比较清楚了...页面的组件 const NotFound = () => { return 你来到了没有知识荒原 } 当然你可以把 404 页面做得更好看一点,比如卡拉云中如果访问不存在链接的话

    24.2K95
    领券