react项目框架了解

src/
  |- components/
  |   |- TableComponent.js
  |   |- TabComponent.js
  |   |- LoadingComponent.js
  |   |- Error404Component.js
  |- pages/
  |   |- HomePage.js
  |   |- AboutPage.js
  |- store/
  |   |- reducers.js
  |   |- actions.js
  |- App.js
  |- index.js

home页面

TypeScript 复制代码
import React from'react';
import TableComponent from '../components/TableComponent';

const HomePage = () => {
  const tableData = [
    { value1: 'Data 1', value2: 'Data 2' },
    { value1: 'Data 3', value2: 'Data 4' }
  ];

  return (
    <div>
      <h1>Home Page</h1>
      <TableComponent data={tableData} />
    </div>
  );
};

export default HomePage;
路由配置(App.js)
TypeScript 复制代码
import React from'react';
import { BrowserRouter as Router, Route, Switch } from'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import Error404Component from './components/Error404Component';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route component={Error404Component} />
      </Switch>
    </Router>
  );
};

export default App;
第三方库Cesium引用
  • 安装Cesium:npm install cesium
  • 在需要使用的页面(例如一个新的MapPage.js)中引用Cesium:
TypeScript 复制代码
import React from'react';
import Cesium from 'cesium/Cesium';

const MapPage = () => {
  // 这里可以进行Cesium相关的初始化和操作
  const viewer = new Cesium.Viewer('cesiumContainer');

  return (
    <div>
      <h1>Cesium Map</h1>
      <div id="cesiumContainer"></div>
    </div>
  );
};

export default MapPage;
  • 然后在路由中添加这个页面的路由:
TypeScript 复制代码
import { BrowserRouter as Router, Route, Switch } from'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import Error404Component from './components/Error404Component';
import MapPage from './pages/MapPage'; // 导入MapPage

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/map" component={MapPage} /> // 添加MapPage的路由
        <Route component={Error404Component} />
      </Switch>
    </Router>
  );
};

export default App;
相关推荐
汪洪墩4 分钟前
【Mars3d】设置backgroundImage、map.scene.skyBox、backgroundImage来回切换
开发语言·javascript·python·ecmascript·webgl·cesium
NoneCoder4 分钟前
CSS系列(29)-- Scroll Snap详解
前端·css
无言非影8 分钟前
vtie项目中使用到了TailwindCSS,如何打包成一个单独的CSS文件(优化、压缩)
前端·css
我曾经是个程序员34 分钟前
鸿蒙学习记录
开发语言·前端·javascript
羊小猪~~1 小时前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5
摸鱼了1 小时前
🚀 从零开始搭建 Vue 3+Vite+TypeScript+Pinia+Vue Router+SCSS+StyleLint+CommitLint+...项目
前端·vue.js
程序员shen1616111 小时前
抖音短视频saas矩阵源码系统开发所需掌握的技术
java·前端·数据库·python·算法
Ling_suu2 小时前
SpringBoot3——Web开发
java·服务器·前端
Yvemil72 小时前
《开启微服务之旅:Spring Boot Web开发》(二)
前端·spring boot·微服务
hanglove_lucky2 小时前
本地摄像头视频流在html中打开
前端·后端·html