react项目框架了解

irisMoon062024-12-23 12:24

复制代码

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;