nprogress用途

nprogress主要应用的场景为页面切换和请求数据，在进行这两项操作时浏览器的顶部会出现进度条，优化用户体验。

效果图

1.页面切换时

2.请求接口时

显示的效果都是一致的。

实现方式

页面切换

注：使用的react构建方式为：react-app-rewired （creat-react-app也是可以使用的亲测）

npm install nprogress

重要
在route中绑定nprogress

新建一个FancyRoute.js文件，在hooks中绑定nprogress的开始与结尾，这样在进行路由的切换时就可以触发到nprogress

import React from 'react'
import { Route } from 'react-router-dom'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css';
import '../resources/FancyRoute.css'
const FancyRoute = props => {React.useState(nprogress.start());React.useEffect(() => {nprogress.done();return () => nprogress.start();});return (<Route {...props} />);
};
export default FancyRoute

在对应的route.jsx文件中使用到刚编写的FancyRoute.js文件

import React, { Suspense, lazy } from 'react';
import {  Switch, NavLink } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import FancyRoute from './plugin/FancyRoute';
const Home = lazy(() => import('./components/main'));
const About = lazy(() => import('./components/test'));
const { Header, Content, Footer } = Layout;
const BasicRoute = () => (<Layout><Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}><div className="logo" /><Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}><Menu.Item key="1"><NavLink to={'/'}>nav 1</NavLink></Menu.Item><Menu.Item key="2"><NavLink to={'home'}>nav 2</NavLink></Menu.Item><Menu.Item key="3"><NavLink to={'/'}>nav 3</NavLink></Menu.Item></Menu></Header><Content style={{ marginTop: 64 }}><Suspense fallback={<div>Loading...</div>}><Switch>{/*引用上一步创建的FancyRoute*/}<FancyRoute exact path="/" component={Home} /><FancyRoute path="/home" component={About} /></Switch></Suspense></Content><Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer></Layout>
);
export default BasicRoute;

以上是在页面切换时的使用方式

请求数据

在请求数据时使用到了fetch，所以对fetch函数进行适量的封装。

新建Fetch.tsx文件这里使用到了typescript函数，也可以使用javascript

import { message } from 'antd';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
const request = (url: string, config: any) => {NProgress.start();return fetch(url, config).then((res: any) => {if (!res.ok) {NProgress.done();throw Error('error');}return res.json();}).then((resJson: any) => {if (resJson.code === 404) {NProgress.done();throw Error('');} else {NProgress.done();return resJson;}}).catch((error: any) => {NProgress.done();console.log("error---->", error)message.error('内部错误');});
};//GET
export const get = (url: string) => {return request(url, {method: 'GET',mode: 'cors',});
};
//POST
export const post = (url: string, data: any) => {return request(url, {body: JSON.stringify(data),headers: {'content-type': 'application/json'},method: 'POST'});
};

封装完成之后就可以正常的使用了

  Fetch.get('http://127.0.0.1:3001/xxx').then(res => {console.log("res--->", res);})

总结：
nprogress在react中使用还是比较简单的，重点是要在对应的位置进行绑定

react使用nprogress相关推荐

React 动态添加路由
如何在React中动态添加路由组件 // 高阶组件,封装过的 router.js import asyncComponent from "../utils/asyncComponent&qu ...
【Umi】通过配置 dynamicImport loadingComponent 实现加载效果
在前端单页面应用中,子页面的代码都是当用户访问到的时候,才会异步去加载子页面的代码.如果子页面代码较大, 那么会给用户一段时间的卡顿感,很影响使用体验.所以,我们想在加载子页面代码时,显示 loadi ...
react 拖拽连接插件_一款精美的 react 后台管理系统
众里寻他千百度,蓦然回首,那人却在,灯火阑珊处.这么好的react开源项目,值得珍藏了! 项目依赖模块项目是用create-react-app创建的,依赖包如下: react(是一个用于构建用户界面 ...
ajax、promise、react、缓存笔记记录
ajax请求 1.请求基本步骤 <body><form action="###">手机号:<input type="text" n ...
react脚手架配置cdn
项目是使用react脚手架搭建的,使用了customize-cra.react-app-rewired来修改脚手架默认的配置 1.添加配置项安装和配置完成基本的config-overrides.js ...
使用Next搭建React SSR工程架构之基础篇
一.Next.js是什么 Next.js是一个基于React的一个服务端渲染简约框架.它使用React语法,可以很好的实现代码的模块化,有利于代码的开发和维护 1.1 Next.js带来了很多好的特性 ...
前端react项目---全球新闻发布管理系统
一. 项目入门 1. 项目介绍该项目是一个全球新闻发布管理系统,可供普通游客,超级管理员,区域管理员,和区域编辑四种角色访问,针对不同的角色所展示的页面也不相同,对于游客而言可以访问到新闻展示页面和 ...
react非常适合入门者学习使用的后台管理框架
项目简介该项目提供一个非常简洁的后台管理ui界面,非常适合初学者学习使用.项目结构: 项目地址:GitHub项目地址技术栈 - react - antd - react-router-dom - ...
在 react 里使用 antd
在 react 里使用 antd 在 powershell 里npm i antd 引入方式: import '../node_modules/antd/dist/antd.css'

react使用nprogress

nprogress用途

效果图

实现方式

页面切换

请求数据

react使用nprogress相关推荐

最新文章

热门文章