面试题：React 中动态加载路由组件的基本方式

Question

在 React 项目里，使用 React Router 时，如何以一种较为常见的方式动态加载路由组件？请简述思路并给出关键代码示例。

Answer 1

思路

在 React 项目中使用 React Router 动态加载路由组件，通常借助 React 的代码分割（Code Splitting）功能，通过 React.lazy 和 Suspense 来实现。React.lazy 用于动态导入组件，使得组件在需要渲染时才加载，而不是在应用启动时就全部加载。Suspense 则用于在组件加载过程中展示加载状态，提升用户体验。

关键代码示例

1. 安装依赖： 确保已经安装了 react-router-dom，如果项目使用的是 React Router v6，示例如下：

npm install react-router-dom

2. 动态加载路由组件：

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';

// 动态加载组件
const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={
          <Suspense fallback={<div>Loading...</div>}>
            <Home />
          </Suspense>
        } />
        <Route path="/about" element={
          <Suspense fallback={<div>Loading...</div>}>
            <About />
          </Suspense>
        } />
      </Routes>
    </Router>
  );
}

export default App;

在上述代码中，Home 和 About 组件通过 React.lazy 动态导入。Suspense 组件的 fallback 属性用于指定在组件加载过程中显示的内容，比如这里的 “Loading...”。这样，当用户访问对应的路由时，相应的组件才会被加载，从而提高应用的初始加载性能。