React管理系统整合Cesium避坑指南

花费了一周时间将React 升级到了最新版本18，同时整合Cesium三维模块到系统中，其中遇到了react 版本升级后模块删改，按照原来的引入方式无法利用的问题，以及Cesium 放入子路由不停404等问题
  
  
一、系统版本依赖

• react@18.3.1
  
• redux@5.0.1
  
• react-router-dom@6.25.1
  
• webpack@5.64.4
  
• cesium@1.119.0
  
• three@0.167.0
  
• cesium_dev_kit@1.0.91
  

二、系统预览

• 登录
  
  
  
  

哔哩哔哩 更直观的介绍 >>>>
https://www.bilibili.com/video/BV1TEvfebERj/?share_source=copy_web&vd_source=fa1aa0302eb3667530ecc801e28d9687

• 功能介绍
  
  
  
  

三、问题搜集

1、首先是Switch，Redirect

最后开始 记得路由模块是 react-router，后期改成了react-router-dom
然鹅老版本配置是如许玩的：

1. import {
2.   BrowserRouter as Router,
3.   Route,
4.   Redirect,
5.   Link,
6.   Switch,
7. } from 'react-router-dom'

复制代码

1.         <Router>
2.         <Switch>
3.           <Route path="/login" component={Login}></Route>
4.           <Route path="/" render={(props) => layout}></Route>
5.           <Redirect exact from="/user" to="/user/index"></Redirect>
6.         </Switch>
7.       </Router>

复制代码

而新版本Redirect、Switch 已从react-router-dom 移除，取而代之的是 Routers 和 Navigate
需要将其改成

1. import {
2.   BrowserRouter as Router,
3.   Route,
4.   Navigate,
5.   Link,
6.   Routers,
7. } from 'react-router-dom'

复制代码

1.         <Router>
2.         <Routers>
3.           <Route path="/login" element={Login}></Route>
4.           <Route path="/" render={(props) => layout}></Route>
5.           <Navigate index element={<Navigate to="/user/index" replace />
6.         </Routers>
7.       </Router>

复制代码

不知道大家注意到没有，上面路由配置尚有一个改动就是component 改成了element
2、hashHistory

这个本来也是在router内里的

1. import {Router, Route, hashHistory} from 'react-router-dom';

复制代码

1. <Router history={hashHistory}></Router>

复制代码

新版本移除了hashHistory ， 需要额外安装 history 模块

1. npm install --save-dev history

复制代码

然后创建history

1. import { createHashHistory } from 'history';
2. const hashHistory = createHashHistory();

复制代码

再是路由注入

1. <Router location={hashHistory.location} navigator={hashHistory}></Router>

复制代码

3、dom 挂载

原来是直接 render

1. import ReactDom from 'react-dom'
3. ReactDOM.render(routes, document.getElementById('root'));

复制代码

如今改到了client 模块内里，而且需要createRoot先构建

1. import ReactDOM from 'react-dom/client';
3. const root = ReactDOM.createRoot(document.getElementById('root'));
4. root.render(routes);

复制代码

4、子页面嵌入

本来利用的是props.children
如：

1. <div className="ant-layout-container">
2.        {this.props.children}
3. </div>

复制代码

而如今需要利用Outlet来实现子页面的嵌入

1. import {Outlet} from "react-router-dom"
3. <div className="ant-layout-container">
4.    <Outlet/>
5. </div>

复制代码

5、子页面加载Cesium

最后一个是用子页面去加载Cesium 三维的模块，不停提示404

就如许，当初我不停认为是路由哪里配置的不对，就不停捣鼓路由配置
接连两天都没解决这个问题，后来直接在App.jsx内里加载Cesium 模块没问题
就如许才渐渐发实际在这个404 不是路由问题，而是子页面内里的http 获取失败！
于是增加了setupProxy.js进行署理才得以解决404的问题

1. module.exports = function (app) {
2.   app.use( '/reactCesium/tools/draw',
3.     createProxyMiddleware({
4.       target:originUrl,
5.       changeOrigin: true,
6.       pathRewrite: {
7.         '^/reactCesium/tools/draw': '', // 重写路径
8.       },
9.     })
10.   );
11. }

复制代码

嗯嗯记得的大概就这些吧，从这次升级的总体感受来说，反正本人觉得react 项目每升级一次都会让人铭记于心的
不知道大家感觉如何？如有其他关于版本差异的可以留言批评，后期我把他加文字便于其它小搭档避坑
最后呈上项目原地址
功能在线预览 https://benpaodehenji.com/reactCesium/
github https://github.com/dengxiaoning/react-cesium

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。