[React] Route-based Splitting
React based Route
2023-09-14 08:59:12 时间
Source: https://javascriptpatterns.vercel.app/patterns/performance-patterns/route-based-splitting
If you're using react-router
for navigation, you can wrap the Switch
component in a React.Suspense
, and import the routes using React.lazy
. This automatically enables route-based code splitting.
import React, { lazy, Suspense } from "react";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
const App = lazy(() => import("./App"));
const About = lazy(() => import("./About"));
const Contact = lazy(() => import("./Contact"));
ReactDOM.render(
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/">
<App />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/contact">
<Contact />
</Route>
</Switch>
</Suspense>
</Router>,
document.getElementById("root")
相关文章
- React系列——websocket群聊系统在react的实现
- react 组件生命周期
- [React] Use react styled system with styled components
- [React Testing] Test your Custom Hook Module with react-hooks-testing-library
- [React] Use CSS Transitions to Avoid a Flash of Loading State
- [React] Refactor a Stateful List Component to a Functional Component with React PowerPlug
- [Node.js] Node Util Promisify - How to Convert Callback Based APIs to Promise-based
- [React Intl] Install and Configure the Entry Point of react-intl
- [React] React Fundamentals: JSX Deep Dive
- [React] React Fundamentals: Introduction to Properties
- [React] Route-based Splitting
- [React] Using react-styleguidist for Component demo
- [React Testing] Test Drive Mocking react-router’s Redirect Component on a Form Submission
- [React + GraphQL] Use useLazyQuery to manually execute a query with Apollo React Hooks
- [React] Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library
- [React Intl] Render Content with Placeholders using react-intl FormattedMessage
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- [React] Create an Auto Resizing Virtualized List with react-virtualized
- [React Native] Build a Separator UI component
- [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer
- [React] React Fundamentals: Precompile JSX
- 使用react来增强backbone视图功能
- react native 如何用vs code 进行调试
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- react格式化展示json
- react修改state的值
- React学习笔记(四)—— 组件通信与状态管理、Hooks、Redux、Mobx
- 【taro react hooks 错误解决】---- Warning: Can‘t perform a React state update on an unmounted component.
- 【taro react】---- 编译微信小程序后报错:Error: Minified React error #321;