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;
相关推荐
Spider_Man1 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia6 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李8 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风9 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录10 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia10 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽12 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥13 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023416 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder22 分钟前
Vite Devtools 要发布了!期待
前端·面试·github