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页面

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)
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:
  • 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;
    

  • 然后在路由中添加这个页面的路由:
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;

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐