说明

Umi文档对TypeScript 只字未提 (太糟糕了, 感觉像是 KPI 项目),
所以只能自己看源码和 Github 去捞TS的定义
最终封装为一个类型IUmiPage

使用的时候只需要指定两个泛型 ( 路由参数类型与 getInitialProps 返回值 )
不指定,则默认{ }空对象

版本

"umi": "^3.5.21"

代码

核心type

不开启SSR SSG , IGetInitialProps会找不到, 所以加上 @ts-ignore

//@ts-ignore
import { IGetInitialProps, IRouteComponentProps } from 'umi';/*** 将 umi 的类型,封装成一个type .* 泛型1 是 路由中的参数类型,* 泛型2 是 getInitialProps返回的类型, 最终会注入到组件的props中*/
type IUmiPage<TRouteProps = {}, TInitResultProps = {}> = FC<IRouteComponentProps<TRouteProps> & TInitResultProps
> & {getInitialProps?: IGetInitialProps<TInitResultProps, TRouteProps>;
};

[id].tsx

import { FC, memo, useEffect, useState } from 'react';
//@ts-ignore
import { IGetInitialProps, IRouteComponentProps } from 'umi';/*** 将 umi 的类型,封装成一个type .* 泛型1 是 路由中的参数类型,* 泛型2 是 getInitialProps返回的类型, 最终会注入到组件的props中*/
type IUmiPage<TRouteProps = {}, TInitResultProps = {}> = FC<IRouteComponentProps<TRouteProps> & TInitResultProps
> & {getInitialProps?: IGetInitialProps<TInitResultProps, TRouteProps>;
};//----组件------
let Post: IUmiPage<{ id: string }, { myData: string }> = (props) => {const [date, setDate] = useState<string>('');useEffect(() => {setDate(new Date().toLocaleString());}, []);return (<><h3>拿到 getInitialProps 返回的属性 : {props.myData}</h3><h3>拿到路由中的属性 : {props.match.params.id}</h3><h3>显示useEffect中的属性 : {date}</h3></>);
};//只能先使用 memo，再添加静态属性和方法，否则 umi获取不到 静态属性和方法， 就失效了
Post = memo(Post);Post.getInitialProps = async (props) => {console.log('我是 getInitialProps: ', props.match.params.id);return Promise.resolve({myData: '我是数据',});
};// 最后不要使用memo，umi会获取不到附加的静态属性和方法, 只能提前加 ↑ .
export default Post;

.umirc.ts

Umi 的配置文件

import { defineConfig } from 'umi';export default defineConfig({nodeModulesTransform: {type: 'none',},// 路由routes: [{ path: '/', component: '@/pages/index' },{ path: '/post/:id', component: '@/pages/post/[id]' },{ path: '/user', component: '@/pages/user' },],fastRefresh: {},// 开启 SSR 与 SSGssr:{},exportStatic: {// 指定预渲染的路由extraRoutePaths: async () => {// const result = await request('https://your-api/news/list');// 此处故意不写 "/post/3"return Promise.resolve(['/post/1', '/post/2']);},},
});

index.tsx

extraRoutePaths 中未指定的带参数的页面,
不会生成HTML,所以无法通过手动输入地址进入(或者刷新)
涉及到 hash 和 history 路由模式, 还有 nginx 和后端配置, 具体自己查吧.
https://github.com/umijs/umi/issues/186

import { Link } from 'umi';export default function IndexPage() {return (<div><h3><Link to="/post/1">post 1</Link></h3><h3><Link to="/post/2">post 2</Link></h3><h3><Link to="/post/3">post 3</Link></h3></div>);
}

react+mobx：如何组织store之最佳实践
上篇文章 create-react-app + webpack + antd + less + mobx 的demo入门配置简单介绍了一个笔者使用的最基本的react配置,简单引入了mobx. 现在 ...
React styled-components TypeScript 的最佳实践
styled-components + TypeScript 需要安装 @types yarn add -D @types/styled-components 详细说明原生dom使用 styled. ...
使用Typescript和React的最佳实践
by Christopher Diggins 克里斯托弗·迪金斯(Christopher Diggins) 使用Typescript和React的最佳实践 (Best practices for us ...
看了就会的Next.js SSR SSG实战教程
Next.js是基于React的服务端渲染工具.在传统的React项目中,例如使用Create-React-App创建的项目,最终build生成的静态文件,是基于浏览器渲染的,即所谓的CSR(Clie ...
typescript 叹号_TypeScript系列（五）最佳实践
前言在进入主题之前,我们先来简单回顾一下前四篇文章想要表达的主题: 当Redux遇到TypeScript:这篇文章从redux的action出发,介绍了as和可判别联合类型(Discriminate ...
react 设计模式与最佳实践
本文是阅读米凯莱·贝尔托利 <React设计模式与最佳实践> 一书的读书笔记,支持作者请点这里购买. Take is cheap, just show me the code. 废话不少说 ...
什么是SSR/SSG/ISR？如何在AWS上托管它们？
概述. 在这篇文章中,我们将讨论如何在AWS上运行SSR/SSG/ISR以及App Runner的魅力. 内容我们将首先分别解释传统和现代网络应用. 接下来,我们将介绍如何在AWS上托管SSR/SS ...
基于 react, redux 最佳实践构建的 2048
前段时间 React license 的问题闹的沸沸扬扬,搞得 React 社区人心惶惶,好在最终 React 团队听取了社区意见把 license 换成了 MIT.不管 React license ...
python组件的react实现_React-Router动态路由设计最佳实践
写在前面随着单页应用(SPA)概念的日趋火热,React框架在设计和实践中同样也围绕着SPA的概念来打造自己的技术栈体系,其中路由模块便是非常重要的一个组成部分.它承载着应用功能分区,复杂模块组织, ...

React Umi SSR SSG 使用TypeScript的最佳实践

说明

版本

代码

核心type

[id].tsx

.umirc.ts

index.tsx

目录

React Umi SSR SSG 使用TypeScript的最佳实践相关推荐

最新文章

热门文章