React Route: Not Found 页

最新推荐文章于 2025-01-08 15:16:23 发布
最新推荐文章于 2025-01-08 15:16:23 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ftell/article/details/122778474
版权
这篇博客介绍了如何在React应用中使用`Switch`组件和`Route`来配置路由，特别是如何通过在所有定义的路由后面放置一个`Route`并用星号`*`通配符来捕获并显示404页面。示例代码展示了从导入组件到在`App`函数组件中设置路由的完整过程，包括重定向、具体页面路由以及404页面的处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Not Found 放在所有 Route 最后，使用星号 * 匹配一切路由。
语法：

     <Route path="*">
          <NotFound />
     </Route>

code example:

import {
    Route, Switch, Redirect } from "re
最低0.47元/天 解锁文章
React——路由Route
敲代码的小李同学的博客
07-08 2310
React 中路由的学习，包括Route组件的介绍与应用、前端渲染与后端渲染、参数化路由、重定向路由以及嵌套路由。
react学习：react-router路由
weixin_44828005的博客
05-28 1605
问题导向 react生命周期何时调用？以及应用场景？ 如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案 学习更多 react学习地图
react-lazyload：延迟加载组件，图像或任何与性能有关的内容
02-05
注意 该项目目前由维护，任何问题或帮助，请与他联系。 React延迟加载 延迟加载组件，图像或任何与性能有关的内容。 为什么更好 考虑到性能，所有延迟加载的组件只有2个事件侦听器 支持one-time lazy load和continuous lazy load模式 scroll / resize事件处理程序的速度，可以避免频繁更新，您也可以切换到防抖模式 支持装饰器 服务器端渲染友好 经过全面测试 安装 2.0.0终于发布了，请阅读《 ，几乎可以轻松升级！ 3.0.0通过使用React ref修复了findDomNode警告，以下是您需要注意的更改 现在我们有一个额外的div包装了延迟加载
React 中的懒加载（Lazy Load）
JudithHuang的博客
03-22 2324
懒加载是一种在需要时才加载资源的策略，它允许我们将组件、图片、样式表或其他资源延迟加载到页面的某个特定点。在 React 中，懒加载通常用于延迟加载组件，尤其是对于那些不是一开始就需要渲染的大型组件或页面。
react-lazy-load
MichaelAn的博客
02-13 154
react-lazy-load react-lazy-load 库说明 在 jquery 中我们实现了图片的懒加载，当界面滚动到一定位置时再加载部分图片，这样可以节省带宽，提高首页加载速度。在博客日志，产品购物等界面使用很广。这个库在IE8以上的浏览器使用良好。 It's fast, works in IE8+...
基于react的lazy-load懒加载实现
weixin_34216107的博客
04-17 4433
前言 在图片应用较为频繁的项目（官网，商城，桌面壁纸项目等）中，如果我们单纯地给每个img标签附加src标签或者给dom节点添加background-image赋值为图片真实地址的话，可想而知浏览器是需要下载所有的图片资源，相当占用网速，这使得我们的网页加载的十分缓慢。 于是，关于解决这种问题的方案之一，lazy-load，懒加载思想应运而生。 思路 监听滚动事件，当滚动到该图片所在的位置的时候，...
React lazyLoad懒加载
小怪獸丶的糖的专栏
02-14 656
在React中使用lazy懒加载 效果图 目录结构 index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter&gt
【React】React Router：深入理解前端路由的工作原理
鑫宝的博客
11-22 2259
深入理解 React Router 的工作原理，不仅能帮助开发者更好地使用这个库，还能提升对前端路由的整体认知。路由不仅仅是页面跳转，更是构建现代 Web 应用的重要基石。通过本文，相信读者已经对 React Router 有了更深入的理解。希望这些insights能够帮助大家在实际开发中更好地运用路由技术。
Python与React结合：构建高效前端与后端的综合性技术探索
这家伙很懒，什么都没有留下
08-19 2262
通过将React与Python结合使用，我们构建了一个集前端展示与后端处理于一体的综合性Web应用。React的组件化开发和高效的性能表现使得前端界面更加流畅和易于维护；而Python的简洁语法和强大功能则为后端处理提供了有力支持。通过合理的项目架构、有效的数据交互以及细致的测试与优化，我们可以开发出既美观又实用的Web应用，满足用户的多样化需求。希望这篇文章能对初学者在React与Python结合使用方面提供一定的帮助和启示。
react 懒加载
Jmyeat的博客
04-02 682
react 懒加载 从react引入lazy 和 Suspense 对于需要懒加载的组件 用lazy包裹引入，lazy是一个函数，参数是一个函数 组件最外层用Suspense 包裹 fallback 是一个组件 当组件加载过程中会显示 import React, { Component, lazy/* react16.0之后新增的 */, Suspense } from "react"; // react异步加载组件的方式 const Box = lazy(()=>import('./modul
react-lazy-load, 当子元素进入viewport时，响应它们呈现子元素.zip
10-10
react-lazy-load, 当子元素进入viewport时，响应它们呈现子元素 延迟加载 组件反应 延迟加载 很容易使用响应组件，它帮助你以可以预测的方式延迟加载内容。 速度快，工作在 IE8+，6KB 缩小，在默认情况下使用去抖功能。 你还可以在滚动容器中使用组件，如带滚动条的div 。 它会自动找到。 查看一个
react-lazy-load:当组件进入视口时，React组件将呈现子元素
04-01
React惰性负载组件 React Lazy Load是易于使用的React组件，可帮助您以可预测的方式推迟加载内容。 它速度很快，可在IE8 +中运行，最小化为6KB，默认情况下使用去抖动功能。 您还可以在滚动容器内使用组件，例如带有滚动条的div。 它会自动找到。 看看一个例子。 安装 React Lazy Load需要React 0.14或更高版本。 npm install --save react-lazy-load 例子 用法 import React from 'react' ; import LazyLoad from 'react-lazy-load' ; const MyComponent = ( ) => ( < div> Scroll to load images. < div xss=removed> < La
react之懒加载lazyLoad
yangyanqin2545的博客
02-19 671
react之懒加载lazyLoad 路由组件的懒加载lazyLoad import {lazy, Suspense} from 'react' //1、通过React的lazy函数配合import()函数动态加载路由组件 ===》 路由组件代码会被分开打包 const Login = lazy(() => import('@/pages/Login')) //2、通过<Suspense>指定在加载得到路由打包前显示一个自定义loading界面 <Suspense fallback
react-lazy-load粗读
weixin_33937778的博客
08-16 212
react-lazy-load粗读 近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下 react-lazy-load 的库的实现。 懒加载 这里懒加载场景不是路由分割打包那种，而是单个页面中有一个很长的列表，列表中的图片进行懒加载的效果。 在 jquery 时代，这种列表图片懒加载效果就已经有了，那么我们想一想这种在滚动的时候才去加载图片等资源的方式...
webpack v3 结合 react-router v4 做 dynamic import — 按需加载（懒加载）
weixin_33966365的博客
09-12 193
为什么要做dynamic import？ dynamic import不知道为什么有很多叫法，什么按需加载，懒加载，Code Splitting，代码分页等。总之，就是在SPA，把JS代码分成N个页面份数的文件，不在用户刚进来就全部引入，而是等用户跳转路由的时候，再加载对应的JS文件。这样做的好处就是加速首屏显示速度，同时也减少了资源的浪...
react-lazyload 的介绍、安装、使用。
qq_45799465的博客
12-08 2068
react-lazyload 是一个 React 组件，用于延迟加载（懒加载）页面上的图片或其他资源。
laravel RouteNotFoundException
gztrljh
12-06 907
今天除了这个问题，看了半天路由也没错，然后最终找到了问题所在 这里多了一个空格。。。
React 路由懒加载lazyload+ Suspense 实现懒加载和预加载
最新发布
涂涂
01-08 1179
延迟加载非必需的组件，只有你需要加载的时候加载，或者在指定时间预加载，比如首屏渲染后再预加载主要组件，当路由到主要组件时，主要组件已经在首屏渲染后预加载好了。减小初始包的大小提高应用的首次加载性能使用 React.lazy 实现组件懒加载使用 Suspense 处理加载状态配合 React Router 实现路由懒加载实现预加载优化用户体验。
React路由组件的lazyLoad
duansamve的博客
05-16 214
1、通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包 const Login = lazy(()=>import('@/pages/Login')) 2、通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面 <Suspense fallback={<h1>loading.....</h1>}> <Switch> ...
React路由：react-router4.x配置指南与实践
<Route component={NotFound} /> ); ``` 以上是一个React应用中使用react-router4.x进行基本配置的简单示例。通过这个示例，你可以了解如何在React项目中设置路由，并通过不同的组件来控制路由的行为和渲染...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值