React单页应用怎么实现伪静态访问？怎么做代码拆分和懒加载？

React单页应用实现伪静态访问和代码拆分、懒加载的方法如下：

1. 伪静态访问（使用BrowserRouter而非HashRouter）

当使用BrowserRouter时，URL看起来更加干净，没有#。但要使其正常工作，服务器需要进行配置，以便对所有路由请求返回同一个HTML文件（通常是index.html）。

例如，对于Express服务器，你可以这样做：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

对于其他服务器（如Apache、Nginx等），你需要配置它们以返回相同的index.html文件，无论请求的路径是什么。

2. 代码拆分和懒加载

React提供了一个名为React.lazy的函数，允许你渲染动态导入的组件作为常规组件。

方法

使用React.lazy():

使用React.lazy()可以自动加载组件。

const SomeComponent = React.lazy(() => import('./SomeComponent'));

使用Suspense组件:

React.lazy和Suspense配合使用，可以显示一些加载提示，直到组件加载完成。

import React, { Suspense } from 'react';

function App() {
    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
            <SomeComponent />
            </Suspense>
        </div>
    );
}

使用Route-based code splitting:

结合React Router，可以实现基于路由的代码拆分。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./routes/Home'));
const About = React.lazy(() => import('./routes/About'));

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

这样，当用户访问不同的路由时，只会加载与该路由相关的代码，从而实现了代码拆分和懒加载。