react大屏可视化项目

1.删除多余文件夹并且添加所需要的文件夹

2.配置路由页面：

import {HashRouter,Route,Routes,Navigate} from "react-router-dom"
import { lazy } from "react"

let arr=[
    {
        path:'/',
        to:'/home'
    },
    {
        path:'/home',
        element:lazy(()=>import('../views/Home/index'))
    },
      {
        path:'/about',
        element:lazy(()=>import('../views/About/index'))
    },
    {
        path:'/watchAll(.*)',
         element:lazy(()=>import('../views/error'))
    }
]

const Router=()=>{
    return (
        <HashRouter>
            <Routes>
                {
                    arr && arr.map((item,index)=>{
                        return (
                            <Route key={index} path={item.path} element={item.element?<item.element></item.element>:<Navigate to={item.to}></Navigate>}>

                            </Route>
                        )
                    })
                }
            </Routes>
        </HashRouter>
    )
}
export default Router

3.引入路由

// 导入React库，用于创建和管理组件。
import React from 'react';
//导入ReactDOM库，用于将React组件渲染到DOM中。
import ReactDOM from 'react-dom/client';
// 导入App组件，这是应用程序的主入口点。
import App from './App';
//导入路由配置，用于管理应用程序中的不同路由。

// 引入
import Router from './router/routerConfig';

//创建一个根渲染器，用于将React组件渲染到指定的DOM元素中
const root = ReactDOM.createRoot(document.getElementById('root'));

//在根渲染器中渲染应用程序的路由组件。

root.render(
 <Router>
    <App />
 </Router>
);

3.主页面根据自己所需要去排版搭建页面

4.如果需要四个图 并且都有标题 可以将公共的四个标题封装成一个组件

import React from 'react'

//引入样式
import './title.css'
const Title = (props) => {
    
  return (
    <div className='bt'>
     <div>{props.title}</div> 
    </div>
  )
}

export default Title

5.如果公共标题需要旋转背景图和文字写如下代码可以实现:

.bt {
    width: 100%;
    height: 30px;
    /* 插入所需背景图 并且不平铺 并且设置大小百分百 */
    background: url('../../assect/images/titlebg.png') no-repeat 0 0 /100% 100%;
    color: white;
    line-height: 30px;
    /* 旋转背景图 */
    transform: rotateY(180deg);
}

.bt div {
    /* 旋转背景图里的字 */
    transform: rotateY(-180deg);
    padding-left: 20px;
}

6.如果页面需要插入图片需要先引入再使用 比如：

注意!如果排版时发生上下有间距可以先给整体页面设置(如果未解决 查看排版使用的标签 假如使用p标签 默认就会自动有间距 此时换成div标签就会解决了)

html,body{
    margin: 0;
    padding: 0;
}

7.白屏优化加载路由页面

const Router=()=>{
    return (
        // 白屏优化
        <Suspense fallback={<div>加载中</div>}>
        <HashRouter>
            <Routes>
                {  }
            </Routes>
        </HashRouter>
        </Suspense>
    )
}
export default Router

8.404错误页面配置

  {
        path:'*',
        element:lazy(()=>import('../views/error'))
  }