当前位置：首页 > React

如何用react构建单页面

2026-01-25 09:55:12React

使用React构建单页面应用（SPA）的步骤

安装Node.js和npm
确保系统已安装Node.js（包含npm）。可通过命令行输入node -v和npm -v验证版本。推荐使用LTS版本。

创建React项目
通过create-react-app快速初始化项目：

npx create-react-app my-spa
cd my-spa

安装React Router
React Router用于管理SPA的路由：

npm install react-router-dom

配置路由
在src/App.js中设置基本路由：

如何用react构建单页面

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

创建页面组件
在src目录下创建页面组件文件（如Home.js和About.js）：

// Home.js
export default function Home() {
  return <h1>Home Page</h1>;
}

启动开发服务器
运行以下命令启动应用：

如何用react构建单页面

npm start

进阶优化

状态管理
如需全局状态管理，可引入Redux或Context API：

npm install @reduxjs/toolkit react-redux

代码分割
使用React的lazy和Suspense实现动态加载：

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

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

部署SPA
构建生产环境代码并部署到服务器：