开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React路由器未打开404未找到页面

React 路由器未打开 404 未找到页面，是指在使用 React 开发前端应用时，当用户访问不存在的页面时，应用没有正确地处理该请求，导致返回一个 404 未找到页面的错误。

React 路由器是 React Router 库提供的一种前端路由解决方案，用于管理前端应用的路由和页面跳转。在使用 React Router 时，我们需要定义路由规则，并且指定每个路由对应的组件。当用户访问某个路由时，React 路由器会根据定义的规则，渲染对应的组件。

对于 404 未找到页面的错误，我们可以通过以下方式进行处理：

使用 <Switch> 组件：React Router 提供了 <Switch> 组件，它会遍历所有子组件 <Route>，并且只渲染第一个与当前 URL 匹配的组件。我们可以在最后一个 <Route> 组件中使用 path="*" 来匹配所有未定义的路由，并渲染一个 404 页面。
示例代码：
示例代码：
使用 <Redirect> 组件：除了使用 <Switch> 和 <Route>，我们还可以在 <Switch> 之外使用 <Redirect> 组件，将所有未匹配的路由重定向到一个特定的页面。
示例代码：
示例代码：

以上是 React 路由器未打开 404 未找到页面的解决方案，适用于 React 应用开发中处理未定义路由的情况。

推荐腾讯云相关产品：如果你想将 React 应用部署到云上，腾讯云提供了众多适用于前端应用的云服务，包括云服务器（CVM）、云存储（COS）、内容分发网络（CDN）等。你可以根据具体需求选择相应的产品进行部署和扩展。

腾讯云产品链接：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云存储（COS）：https://cloud.tencent.com/product/cos
内容分发网络（CDN）：https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

react 直接打开路由页面或者刷新页面404 问题解决

loc项目前端使用了react 以及react-router，通过点击跳转到相应的路由页面没有问题，但跳转后刷新页面，或者输入路由网址直接打开页面，就会出现404错误网上查了下资料可以修改nginx

2.2K2 0

React 项目部署后，页面404解决

解决方法一： Nginx 配置 { listen 80 ; listen [::]:80 ; root /usr/local/react/build; //项目打包代码地址...try_files $uri $uri/ /index.html; //项目服务访问地址 } } 解决方法二： BrowserRouter 换成 HashRouter import React...from 'react'; import ReactDOM from 'react-dom/client'; import {HashRouter} from 'react-router-dom' import...但是项目打包后，当页面刷新或跳转新页面时，客户端浏览器会向服务器请求URL。服务器会去找build文件夹下的html文件，发现找不到URL指定的路径。...这是因为实际上并没有这样的物理路径，或者没有配置路由请求，所以内容无法显示，而显示404错误。

3.4K3 0

Web打开EasyNVR页面显示404 NOT FOUND如何排查及处理？

近期在某项目现场，EasyNVR在打开Web页面的时候无法打开，显示404 NOT FOUND：这个问题其实算是比较基础的问题，之前有用户咨询的时候我们也分享过不少，现在就讲一下这类问题的处理流程，...3.查看easynvr.ini配置文件发现端口正常为10800： 4.查看nginx的端口发现和easynvr的web10800端口冲突了导致无法正常的启动服务：并且10800的页面也是nginx...的页面： 5.修改nginx的端口为默认的10100然后重启服务就可以了。

4152 0

Web打开EasyNVR页面显示404 NOT FOUND如何排查及处理？

近期在某项目现场，EasyNVR在打开Web页面的时候无法打开，显示404 NOT FOUND： ?...并且10800的页面也是nginx的页面： ? 5.修改nginx的端口为默认的10100然后重启服务就可以了。

4583 0

react跳转url，跳转外链，新页面打开页面

react中实现在js中内部跳转路由，有两种方法。...); }}方法二：this.props.history.push('/download')跳转到外链：window.location.href = 'https://你的url'在页面中给一个按钮绑定绑定跳转...，如果跳转到项目的路由，引入react-router的Link使用下载形式跳转，如果希望页面从新页面打开,加 target="_blank"如果跳转到一个外链...，使用a标签，如果希望页面从新页面打开，除了加target, target="_blank"还要加一个rel:<a href="https://internal.zhongwentoutiao.com

11.3K1 0

React.js Vue.js 项目部署页面刷新404

使用react，vue等开发的项目因为是前后端分离，所有打包发布到服务器以后，需要放在一个静态服务器中运行配置Nginx服务器: cd /etc/nginx/conf.d vim demo.confg...index index.html index.htm; } } 重启Nginx: service nginx restart 重启以后访问你的域名或者IP就可以正常访问项目注意事项: 当你使用了react-router...的browserHistory模式或者使用了vue-router的history模式刷新页面会出现404的情况解决方法: 修改Nginx配置信息如下: location / { try_files...$uri $uri/ /index.html; } 原理: 因为我们的项目只有一个根入口，当输入类似/home的url时，找不到这个页面，这时nginx会尝试加载index.html，加载index.html...之后，react-router或vue-router就能起作用并匹配我们输入的/home路由，从而显示正确的home页面

4.1K3 0

【React】React-router的使用记录

Router Router就是路由器，里面包含若干个Route（路由）常用的Router有两个： 1、 2、 BrowserRouter即在浏览器地址栏中不显示...Route Route包含在Router中，但更多情况下，我们直接都是把Router放在“根”上，也即App上： import React from "react"; import ReactDom from..."react-dom"; import App from "....NotFound 如果未找到页面，返回404，如何做？...在所有Route后面再加上一个Route，返回一个404组件即可，但是，注意：需要使用Switch来包裹，或者每个Route都是用exact属性，来使精准匹配URL

1.8K1 0

Vue + Element UI 实现权限管理系统前端篇（二）：Vue + Element 案例

安装 Element 安装依赖 Element 是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了 vue、react、angular 等多个版本，我们这里使用 vue 版本来搭建我们的界面。...页面路由添加页面我们把 components 改名为 views，并在 views 目录下添加三个页面，Login.vue，Home.vue，404.vue。...router/index.js，添加三个路由，分别对应主页、登录和404页面。...', name: 'notFound', component: NotFound } ] }) 浏览器重新访问下面不同路径，路由器会根据路径路由到相应的页面。...访问：http://localhost:8080/#/404，正确显示修改后的 404 页面效果。 ?

5K2 0

2025最新出炉--前端面试题十

能跟我讲讲你是怎么理解 ssr 的吗回答： SSR（Server-Side Rendering）指在服务端生成完整 HTML 页面，核心优势： SEO 友好：爬虫直接获取渲染后的内容。...基于 React.js（支持 Vue 3）。多端支持微信小程序、H5、App、快应用等。微信小程序、H5、React Native 等。开发体验单文件组件，类似 Vue CLI。...Taro：适合 React 技术栈团队，或需深度定制化需求。 5....资源未过期时直接使用本地缓存（状态码 200）。协商缓存： ETag（优先级高） > Last-Modified。...）、403（禁止）、404（未找到） 5xx 服务端错误 500（内部错误）、502（网关错误）、503（服务不可用） 8.

941 0

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

同理，想要在 axios 中调用第三方库，例如页面路由，也需要把放在路由器中。...接着我们在 Children2 组件中进行了页面路由，一个 / 路径，一个 /404 路径。...在默认页面 DefaultPage 组件中，我们可以进行一次错误的请求，请求会返回给我们 404 的状态码，现在我们需要在 axios 中进行拦截，当请求出现 404 时，跳转到 /404 页面。...(interId); }, [historyRef]); } 复制代码大功告成，现在所有的 404 请求都会将页面重定向到 /404 页面，在 codesandbox 中错误请求会把错误信息展示到页面上...你现在可以尝试点击默认页中的按钮，它会进行一个 404 请求，页面将重定向到 /404 页面。

2.6K3 0

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

这篇文章里我们总结 React Router 6 路由器的用法，用例子说明如何实现各种场景和需求，比如程序化跳转等等。...每当用户访问根地址时，加载 Home 这个页面，而当用户访问 /about 时，就加载页面。...页) 在上文的路由列表 Routes 中，我们可以加入一个 catch all 的默认页面，比如用来作 404 页面。...页面的组件 const NotFound = () => { return 你来到了没有知识的荒原 } 当然你可以把 404 页面做得更好看一点，比如卡拉云中如果访问不存在的链接的话...，404 页面如下 [卡拉云 404 页面] 如何用 React Router 鉴权并保护路径总结本文中我们介绍了如何使用 React-Router，用一个实例说明 React Router 6 中的

24.7K9 5

网页错误码详细报错

• 404 - 未找到。 • 404.0 -（无） – 没有找到文件或目录。 • 404.1 - 无法在所请求的端口上访问 Web 站点。...• 500.18 – URL 授权存储不能打开。这个错误代码为 IIS 6.0 所专用。 • 500.100 - 内部 ASP 错误。 • 501 - 页眉值指定了未实现的配置。 ...- 未找到。...• 425 无法打开数据连接。 • 426 Connection closed; transfer aborted. • 450 未执行请求的文件操作。文件不可用（例如，文件繁忙）。 ...文件不可用（例如，未找到文件，没有访问权限）。 • 551 请求的操作异常终止：未知的页面类型。 • 552 请求的文件操作异常终止：超出存储分配（对于当前目录或数据集）。

5.6K2 0

React Router初学者入门指南（2023版）

不幸的是，普通的链接通常会触发页面刷新来显示组件，从而破坏用户体验。这就是React Router的用武之地。...React Router允许您在应用程序中定义不同的路由，并将它们链接到各自的组件，而无需重新加载页面。这种方法使得React Router能够轻松更新页面上的内容，并使网站感觉像一个原生应用程序。...这就是React Router在不刷新页面的情况下来回导航路由的方式。 Location：这指的是在浏览网站时当前所在的URL。...浏览器路由器及其用途众所周知，React使用组件和钩子，React Router也是如此。而React Router提供的一个关键组件是。...404 页面 404错误是一个HTTP状态码，当请求的资源或页面无法找到时会显示出来。这可能发生在用户输入了一个不存在的URL时。

6583 1

【网页】HTTP错误汇总（404、302、200……）

• 404 - 未找到。 • 404.0 -（无） – 没有找到文件或目录。 • 404.1 - 无法在所请求的端口上访问 Web 站点。...• 500.18 – URL 授权存储不能打开。这个错误代码为 IIS 6.0 所专用。 • 500.100 - 内部 ASP 错误。 • 501 - 页眉值指定了未实现的配置。...- 未找到。...• 425 无法打开数据连接。 • 426 Connection closed; transfer aborted. • 450 未执行请求的文件操作。文件不可用（例如，文件繁忙）。...文件不可用（例如，未找到文件，没有访问权限）。 • 551 请求的操作异常终止：未知的页面类型。 • 552 请求的文件操作异常终止：超出存储分配（对于当前目录或数据集）。

12.1K2 0

网站服务器错误代码介绍

最常见的错误： 404–找不到文件或者目录不存在 403–找不到默认首页 505–服务器内部错误信息提示（这些状态代码表示临时的响应。...例如，客户端请求不存在的页面，客户端未提供有效的身份验证信息）： 400–错误的请求 401–访问被拒绝（IIS定义了许多不同的401错误，它们指明更为具体的错误原因。...这个错误代码为IIS6.0所专用 404–未找到 404.0–没有找到文件或目录 404.1–无法在所请求的端口上访问Web站点 404.2-Web服务扩展锁定策略阻止本请求 404.3–MIME...映射策略阻止本请求 405–用来访问本页面的HTTP谓词不被允许（方法不被允许） 406–客户端浏览器不接受所请求页面的MIME类型 407–要求进行代理身份验证 412–前提条件失去 413...这个错误代码为IIS6.0所专用 500.18–URL授权存储不能打开。

3K4 0

什么是Ajax以及ajax请求的步骤

4.readyState状态码 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪 5.http状态码（status） 200：（成功） 403：...（禁止）服务器拒绝请求 404：（未找到）服务器找不到请求的页面 408：（请求超时）服务器等候请求发生超时 500：（服务器内部错误）服务器遇到错误，无法完成请求 6.onload和onreadystatechange... readyState状态码 0：请求未初始化 1：服务器连接已建立 2：...http状态码（status） 200：（成功） 403：（禁止）服务器拒绝请求 404...：（未找到）服务器找不到请求的页面 408：（请求超时）服务器等候请求发生超时 500：（服务器内部错误）服务器遇到错误，无法完成请求

2.3K2 0

AJAX+JSON总结

0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status 200: "OK" 404: 未找到页面...0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status 200: "OK" 404: 未找到页面在 onreadystatechange

1.9K2 0

『React Navigation 3x系列教程』createDrawerNavigator开发指南

activeBackgroundColor: 选中item的背景色； inactiveTintColor: 未选中item状态的文字颜色； inactiveBackgroundColor: 未选中item...这也可以通过在顶级路由器上使用screenProps.drawerLockMode 动态更新。...侧边栏操作(打开、关闭、切换) 侧边栏支持以下几种操作方式： navigation.openDrawer(); navigation.closeDrawer(); navigation.toggleDrawer...其中路由名openDrawer对应这打开侧边栏的操作，DrawerClose对应关闭侧边栏的操作，toggleDrawer对应切换侧边栏操作，要进行这些操作我么还需要一个navigation，navigation...可以从props中获取；打开侧边栏：navigation.openDrawer();；关闭侧边栏：navigation.closeDrawer();；切换侧边栏：navigation.toggleDrawer

7.1K1 0

使用 React 开发单页应用的实践

创建 React 应用使用 Create React App 工具可以快速创建一个新的 React 项目。... );};export default Home;1.3 About 组件About.js 组件将显示关于页面的内容。... );};export default About;1.4 NotFound 组件NotFound.js 组件将处理未找到页面的情况。... 404 Not Found The page you are looking for does not exist....运行应用在终端中运行以下命令启动开发服务器：bash复制npm start打开浏览器并访问 http://localhost:3000，你应该能看到应用的主页。

1941 0

5-5 webapck-dev-server 解决单页应用路由问题

准备一个 spa 我们首先准备一个 spa： // src/home.js import React, { Component } from 'react'; class Home extends Component..., Fragment } from 'react'; import ReactDom from 'react-dom'; import { BrowserRouter, Route } from 'react-router-dom...我们可以查看 connect-history-api-fallback 比如 rewrites，我们可以指定特定的路由匹配的路径，如下，我们生成一个 404 页面： 404.html--> <!....html'} ] }, 然后我们运行 npm run dev-server，打开页面： ?

8702 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭