【翻译】基于 Create React App路由4.0的异步组件加载(Code Spl
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的 代码分割(Code Splitting)当我们用 你可能会注意到 代码分割和 react-router在我们 /* Import the components */ import Home from './containers/Home'; import Posts from './containers/Posts'; import NotFound from './containers/NotFound'; /* Use components to define routes */ export default () => ( <Switch> <Route path="/" exact component={Home} /> <Route path="/posts/:id" exact component={Posts} /> <Route component={NotFound} /> </Switch> ); 我们一开始引入这些组件,然后定义好的路径,会根据我们的路由去匹配这些组件。 但是,我们静态地在顶部导入路由中的所有组件。这意味着,不管哪个路由匹配,所有这些组件都被加载。我们只想加载对匹配路由的时候才加载响应的组件。下面我们一步步来完成这个使命。 创建一个异步组件创建一个js 文件,如: import React,{ Component } from 'react'; export default function asyncComponent(importComponent) { class AsyncComponent extends Component { constructor(props) { super(props); this.state = { component: null,}; } async componentDidMount() { const { default: component } = await importComponent(); this.setState({ component: component }); } render() { const C = this.state.component; return C ? <C {...this.props} /> : null; } } return AsyncComponent; } 我们在这里做了一些事情:
使用异步组件现在让我们使用我们的异步组件,而不是像开始的静态去引入。 import Home from './containers/Home'; 我们要用
const AsyncHome = asyncComponent(() => import('./containers/Home')); 我们将要使用 <Route path="/" exact component={AsyncHome} /> 现在让我们回到Notes项目并应用这些更改。
import React from 'react'; import { Route,Switch } from 'react-router-dom'; import asyncComponent from './components/AsyncComponent'; import AppliedRoute from './components/AppliedRoute'; import AuthenticatedRoute from './components/AuthenticatedRoute'; import UnauthenticatedRoute from './components/UnauthenticatedRoute'; const AsyncHome = asyncComponent(() => import('./containers/Home')); const AsyncLogin = asyncComponent(() => import('./containers/Login')); const AsyncNotes = asyncComponent(() => import('./containers/Notes')); const AsyncSignup = asyncComponent(() => import('./containers/Signup')); const AsyncNewNote = asyncComponent(() => import('./containers/NewNote')); const AsyncNotFound = asyncComponent(() => import('./containers/NotFound')); export default ({ childProps }) => ( <Switch> <AppliedRoute path="/" exact component={AsyncHome} props={childProps} /> <UnauthenticatedRoute path="/login" exact component={AsyncLogin} props={childProps} /> <UnauthenticatedRoute path="/signup" exact component={AsyncSignup} props={childProps} /> <AuthenticatedRoute path="/notes/new" exact component={AsyncNewNote} props={childProps} /> <AuthenticatedRoute path="/notes/:id" exact component={AsyncNotes} props={childProps} /> { /* Finally,catch all unmatched routes */ } <Route component={AsyncNotFound} /> </Switch> ); 只需几次更改就相当酷了。我们的app都是设置了代码分割而的。也没有增加太多的复杂性。 import React from 'react'; import { Route,Switch } from 'react-router-dom'; import AppliedRoute from './components/AppliedRoute'; import AuthenticatedRoute from './components/AuthenticatedRoute'; import UnauthenticatedRoute from './components/UnauthenticatedRoute'; import Home from './containers/Home'; import Login from './containers/Login'; import Notes from './containers/Notes'; import Signup from './containers/Signup'; import NewNote from './containers/NewNote'; import NotFound from './containers/NotFound'; export default ({ childProps }) => ( <Switch> <AppliedRoute path="/" exact component={Home} props={childProps} /> <UnauthenticatedRoute path="/login" exact component={Login} props={childProps} /> <UnauthenticatedRoute path="/signup" exact component={Signup} props={childProps} /> <AuthenticatedRoute path="/notes/new" exact component={NewNote} props={childProps} /> <AuthenticatedRoute path="/notes/:id" exact component={Notes} props={childProps} /> { /* Finally,catch all unmatched routes */ } <Route component={NotFound} /> </Switch> ); 注意,不要在顶部的引入所有的组件。我们正在创建这些代码分割的功能,以便在必要时为我们进行动态导入。 现在你运行
下面是部署好的在网站的真实截图
每个 原文地址:http://serverless-stack.com/c... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |