约定式路由
路由，我们用约定式路由，也就是根据pages下面的文件自动生成路由，不用手动去管理。
路由配置，删除手动路由，使用
约定式路由
,在根目录找到
.umirc.ts
删除下面代码
- layout: {},
这时加一个login.tsx吧, 假设页码写好了，这时候我们需要进行请求，我们配置下请求吧。
这时候，我们在src下面新建一个layouts/index.tsx，代码参考如下
import { IRouteComponentProps } from 'umi'
import request from 'umi-request'
export default function Layout ({ children, location, route, history, match }: IRouteComponentProps ) {
request.extendOptions ({
prefix : 'https://xxxxx.com'
return children
上面这是配置下prefix,但是我们需要对授权进行处理，比如登陆成功后需要设置token，比如返回值修改等，我们可以编写一个中间件，使用代码也很简单，加个use就可以了，token示例代码如下
request.use (async (ctx, next) => {
ctx.req .options .headers = {
...ctx.req .options .headers ,
'token' : localStorage .token || ''
await next ()
umi-request详细文档
这时候就可以开始在页面使用请求，如下代码
import styles from './index.less' ;
import { history } from 'umi'
import fetch from 'umi-request'
import { useEffect } from 'react' ;
export default function IndexPage () {
useEffect (() => {
const init = async () => {
const res = await fetch.post ('/api/v2/main/auth/xxx' , { data : { accountaddress : "xx" } })
console .log (res)
init ()
}, [])
return (
<h1 className ={styles.title} > Page index</h1 >
</div >
tree ./dist
./dist
├── index.html
├── umi.css
└── umi.js
上面已经是完成了一个基本环境，这时候开始主题。我们开启快速构建的登陆页面和菜单栏跟列表吧。
plugin-locale
依赖 @ant-design/pro-layout
locale : {
default : 'en-US' ,
antd : true ,
baseNavigator : true ,
import { useIntl } from 'umi'
const intl = useIntl ();
window .intl = intl
使用方式 FormattedMessage or intl.formatMessage({ id: 'pages.login.successfully' })
type intl = {
formatMessage (option : { id : string ; defaultMessage?: string }): string ;
全局less
src/global.less就可以，不过得注意下，需要重启启动项目
layout/index.tsx， 自定义左右栏，
({ children, location, route, history, match }) => {
const { routes = [] } = route;
const { breadcrumb, menuData } = getMenuData (routes);
return location.pathname === '/user/login' ? children : <div className ={styles.box} >
<ProLayout
style ={{ flexDirection: 'row ', height: '100vh ' }}
title ={ ' ' || intl.formatMessage ({ id: 'component.globalHeader.title ' })}
logo ={ <Logo width ={150} > </Logo > }
menuRender={menuRender}
headerRender={headerRender}
{children}
</ProLayout >
</div > 如果用的是不是约定式路由，那么菜单栏基本上不需要改动，并且还会自动生成面包屑，但是约定式路由就需要自己手动操作了
多语言切换可以用<SelectLang />组件，在umi上面.
列表页的实现
import styles from './_nftHandle.less'
import { Input , Pagination , Spin } from 'antd'
import { NFTCheckStatus } from './type' ;
import { useEffect, useState } from 'react' ;
import request from 'umi-request' ;
import { ImgFit } from '@/components/ImgFit' ;
const { Search } = Input
function showTotal (total : number ) {
return `Total ${total} items` ;
interface INFTCheckHandle {
type : NFTCheckStatus
export default function NFTCheckHandle ({ type }: INFTCheckHandle ) {
const onSearch = (value: string ) => console .log (value)
const list : { src : string ; name : string }[] = new Array (20 ).fill ({ src : '' , name : 'name' })
const [loading, setloading] = useState (true )
useEffect (() => {
const init = async () => {
await new Promise ((ok ) => setTimeout (ok, 500 ))
setloading (false )
init ()
}, [])
return <div >
<Spin spinning ={loading} tip ="Loading..." >
<div style ={{ width: 500 }}>
<Search
placeholder ={intl.formatMessage({ id: 'component.input.searchPlaceholder ' })}
allowClear
enterButton ={intl.formatMessage({ id: 'component.input.search ' })}
size ="large"
onSearch ={onSearch}
</div >
<div className ={styles.row} >
{list.map((e, index) => <div key ={index} className ={[styles.item, 'flex '].join (' ')}>
<ImgFit src ={e.src} width ={260} height ={262} />
</div >
<p > {type} {e.name}</p >
</div > )}
</div >
</Spin >
<Pagination
size ="small"
total ={50}
disabled ={false}
showTotal ={showTotal}
showSizeChanger
showQuickJumper
</div >
使用pro table
精读《@umijs/use-request》源码 umi-request 网络请求之路 umiJs文档 umiJs plugin-locale
737
猪头切图仔
JavaScript
React.js
4.4w
superZidan
JavaScript
React.js
音视频开发
8.4w
萌萌哒草头将军
Vue.js
React.js
2.4w
京东云开发者
React.js
Vue.js
3.4w
jasonboy7
React.js
Node.js
macOS
792
魔术师卡颂
JavaScript
React.js
734
我不是外星人
JavaScript
React.js
