react-router|react-router + typeScript的lazy loading配置 react-router+typeScript的lazyloading配

这篇文章将通过一个demo来描述，怎么在使用typeScript的项目里面，使用react-router和React.lazy来实现lazy loading来提升网页性能。
建议先读一下相关的React官方文档：https://reactjs.org/docs/code-splitting.html#suspense
首先这个demo共有4个页面，3个url
1 '/' -> Home Page
2 '/blogList' ->Blog List Page
3 '/blogDetails/:id' -> Blog Details Page
大家都知道对于Blog Details Page的页面，通常的做法是在url里面加变量，以此来区分，当前是哪篇博客。
在这个例子里，我们创建了2篇博客，所以页面总共算起来有4个，但是在代码去实现的时候，我们会有3个文件：HomePage.tsx, BlogDetailsPage.tsx, BlogDetailsPage.tsx.
下面是我们的4个页面，从这个页面上，就能看出来我们的user journey: 1：到了home page, 此上有个链接可以去到 blog list page
2：到了blog list page, 从页面上有2篇博客链接
3：点击第一篇博客链接，进入第一篇博客的详情页面
4：点击第二篇博客链接，进入第二篇博客的详情页面

文章图片
Home Page
文章图片
Blog Lis tPage
文章图片
第一篇Blog Details Page
文章图片
第二篇Blog Details Page 安装react-router-dom && @types/react-router-dom

yarn add react-router-dom @types/react-router-dom

配置react-router index.tsx

// index.tsx import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import "./index.scss"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; ReactDOM.render( , document.getElementById("root")); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();

App.tsx

//App.tsx import React, { Suspense, lazy } from "react"; import { Switch, Route } from "react-router-dom"; import HomePage from './pages/HomePage/HomePage' const BlogListPage = lazy(()=> import('./pages/blogListPage/BlogListPage')); const BlogDetailsPage = lazy(()=> import('./pages/blogDetailsPage/BlogDetailsPage')); function WaitingComponent(Component: React.FC ) { return (props: any) => (); }function App() { return ( ); }export default App;

HomePage.tsx

//HomePage.tsx import React from "react"; import logo from "./images/logo.svg"; import pink from "./images/pink.png"; import "./HomePage.scss"; import {Link} from "react-router-dom"; function App() { return ( Blog List Page); }export default App;

BlogListPage.tsx

// BlogListPage.tsx import React from "react"; import {RouteComponentProps} from "react-router"; import {Link} from "react-router-dom"; function BlogListPage() { return (Blog List Page First Blog Second Blog ); }export default BlogListPage;

BlogDetailsPage.tsx

//BlogDetailsPage.tsx import React from "react"; import {RouteComponentProps, useParams} from 'react-router-dom'type routerParams = {id: string}function BlogDetailsPage(props: RouteComponentProps){ const {id} = useParams(); return (Blog Details page【react-router|react-router + typeScript的lazy loading配置】The id in the url is: {id} ); } export default BlogDetailsPage;