react项目框架了解

news2024/12/23 11:07:04
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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2264200.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【蓝桥杯选拔赛真题96】Scratch风车旋转 第十五届蓝桥杯scratch图形化编程 少儿编程创意编程选拔赛真题解析

目录 scratch风车旋转 一、题目要求 编程实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 1、思路分析 2、详细过程 四、程序编写 五、考点分析 六、推荐资料 1、入门基础 2、蓝桥杯比赛 3、考级资料 4、视频课程 5、python资料 scratc…

未来 AI 在企业应用中的重心

1. LLM 中精度、参数、数据、性能、以及成本之间的权衡是什么&#xff1f; 在大型语言模型&#xff08;LLM, Large Language Models&#xff09;中&#xff0c;精度、参数数量、训练数据量、性能和成本之间的权衡是一个复杂且多维度的问题。以下是这些因素之间关系的简要分析&…

Docker 安装 禅道-21.2版本-外部数据库模式

Docker 安装系列 1、拉取最新版本&#xff08;zentao 21.2&#xff09; [rootTseng ~]# docker pull hub.zentao.net/app/zentao Using default tag: latest latest: Pulling from app/zentao 55ab1b300d4b: Pull complete 6b5749e5ef1d: Pull complete bdccb03403c1: Pul…

排序算法 (插入,选择,冒泡,希尔,快速,归并,堆排序)

排序:经常在算法题中作为一个前置操作,为了之后的贪心or else做个铺垫,虽然我们经常都只是调用个sort,但是了解一些排序算法可以扩充下知识库 排序的分类: 从存储设备角度&#xff1a; ✓ 内排序&#xff1a;在排序过程中所有数据元素都在内存中&#xff1b; ✓ 外排序&a…

web复习(五)

一、补零 二、打印出五行五列的星星 三、用户输入行数和列数并打印相应行数和列数的⭐ 四、打印倒三角星星&#xff08;第一行一个&#xff0c;第二行两个...&#xff0c;以此类推&#xff09; 五、用户输入秒数&#xff0c;可以自动转换为时分秒 六、随机点名

法规标准-C-NCAP评测标准解析(2024版)

文章目录 什么是C-NCAP&#xff1f;C-NCAP 评测标准C-NCAP评测维度三大维度的评测场景及对应分数评星标准 自动驾驶相关评测场景评测方法及评测标准AEB VRU——评测内容(测什么&#xff1f;)AEB VRU——评测方法(怎么测&#xff1f;)车辆直行与前方纵向行走的行人测试场景&…

XRP价格跌破2.20美元 1.94美元是否下一波牛市的关键支撑?

原文转自&#xff1a;XRP价格跌破2.20美元 1.94美元是否下一波牛市的关键支撑&#xff1f; - 币热网 - 区块链数字货币新闻消息资讯 XRP价格经历剧烈波动后强势反弹&#xff0c;$1.94或成新牛市关键支撑 在过去24小时内&#xff0c;XRP价格经历了一场过山车式的剧烈波动。价…

centos-stream9系统安装docker

如果之前安装过docker需要删除之前的。 sudo dnf -y remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine 安装yum-utils工具&#xff1a; dnf -y install yum-utils dnf-plugin…

H264编解码标准码流分析:SPS语法

H264编解码标准 SPS 语法解析 解释:H264编解码标准中的SPS(Sequence Parameter Set,序列参数集)是一组编码视频序列的全局参数,包含了视频编码序列的基本属性和配置信息。分析工具:elecard streamEye、elecard StreamAnalyzer、h264Visa 等elecard StreamAnalyzer 展示形…

使用 AI 辅助开发一个开源 IP 信息查询工具:一

本文将分享如何借助当下流行的 AI 工具,一步步完成一个开源项目的开发。 写在前面 在写代码时&#xff0c;总是会遇到一些有趣的机缘巧合。前几天&#xff0c;我在翻看自己之前的开源项目时&#xff0c;又看到了 DDNS 相关的讨论。虽然在 2021 年我写过两篇相对详细的教程&am…

门控循环单元(GRU):深度学习中的序列数据处理利器

目录 ​编辑 引言 GRU的诞生背景 GRU的核心机制 GRU的计算过程 GRU的数学公式 GRU的应用领域 代码示例&#xff1a;PyTorch中的GRU GRU与LSTM的比较 参数比较 GRU的技术发展 BiGRU&#xff08;双向GRU&#xff09; BiGRU的实现示例 GRU与CNN的结合 GRU的应用案例…

Sui 基金会任命 Christian Thompson 为新任负责人

Sui 基金会是专注于推动 Sui 蓬勃发展的生态增长与采用的机构。近日&#xff0c;基金会宣布任命 Christian Thompson 为新任负责人。在 Sui 主网发布的开创性一年里&#xff0c;Sui 凭借其无与伦比的速度、可扩展性和效率&#xff0c;迅速崛起为领先的 Layer 1 区块链之一&…

Vue2五、商品分类:My-Tag表头组件,My-Table整个组件

准备&#xff1a; 安包 npm less less-loader。拆分&#xff1a;一共分成两个组件部分&#xff1a; 1&#xff1a;My-Tag 标签一个组件。2&#xff1a;My-Table 整体一个组件&#xff08;表头不固定&#xff0c;内容不固定&#xff08;插槽&#xff09;&#xff09; 一&…

mysql运维篇笔记——日志,主从复制,分库分表,读写分离

目录 日志 错误日志 二进制日志 查询日志 慢查询日志 主从复制 概念&#xff1a; 优点&#xff1a; 原理&#xff1a; 搭建&#xff1a; 1&#xff0c;服务器准备 2&#xff0c;主库配置 3&#xff0c;从库配置 4&#xff0c;测试 分库分表&#xff1a; 介绍 问题分析 中心思想…

【JavaEE初阶】线程 和 thread

本节⽬标 认识多线程 掌握多线程程序的编写 掌握多线程的状态 一. 认识线程&#xff08;Thread&#xff09; 1概念 1) 线程是什么 ⼀个线程就是⼀个 "执⾏流". 每个线程之间都可以按照顺序执⾏⾃⼰的代码. 多个线程之间 "同时" 执⾏着多份代码. 还…

设计模式期末复习

一、设计模式的概念以及分类 二、设计模式的主题和意图 设计模式的主题是关于软件设计中反复出现的问题以及相应的解决方案。这些主题是基于长期实践经验的总结&#xff0c;旨在提供一套可复用的设计思路和框架&#xff0c;以应对软件开发中的复杂性和变化性。 三、面向对象程…

【小白51单片机专用教程】protues仿真AT89C51入门

课程特点 无需开发板0基础教学软件硬件双修辅助入门 本课程面对纯小白&#xff0c;因此会对各个新出现的知识点在实例基础上进行详细讲解&#xff0c;有相关知识的可以直接跳过。课程涉及protues基本操作、原理图设计、数电模电、kell使用、C语言基本内容&#xff0c;所有涉及…

MFC用List Control 和Picture控件实现界面切换效果

添加List Control 和Picture控件 添加 3个子窗体 把子窗体边框设置为None, 样式设为Child 声明 CListCtrl m_listPageForm;void ShowForm(int nIndex);void CreatFormList();void CMFCApplication3Dlg::DoDataExchange(CDataExchange* pDX) {CDialogEx::DoDataExchange(pDX);DD…

Linux高并发服务器开发 第五天(压缩解压缩/vim编辑器)

目录 1.压缩和解压缩 1.1压缩 1.2解压缩 2.vim编辑器 2.1vim的3种工作模式 2.2切换编辑模式 2.3保存和退出 2.4光标移动 1.压缩和解压缩 - Linux 操作系统&#xff0c;默认支持的 压缩格式&#xff1a;gzip、bzip2。 默认&#xff0c;这两种压缩格式&#xff0c;只能…

接口测试Day-02-安装postman项目推送Gitee仓库

postman安装 下载 Postman&#xff08;已提供安装包&#xff0c;此步可以跳过&#xff09; https://www.postman.com/downloads/安装 Postman 安装Postman插件newman 要想给 postman 安装 newman 插件&#xff0c;必须 先 安装 node.js。 这是前提&#xff01; 安装node.js 可能…