react 管理系统(一二级路由和antd的应用以及echarts)

1.一二级路由

    1).入口index.js 为一级路由(其中包括主页面和404页面)

2),App.js中 为二级路由(主页面里点击路由跳转不同界面)

3 )路由

4), 主页面布局 admin,js 主要是从antd (ui库)里找代码 (要先引入)

    5)注意:其中渲染的二级路由页面内容为{this.props.children}

   (1)    第一个二级路由页面,dashBoard.JS 里面放了一个表格  (代码去UI库找https://ant.design/

2.数据可视化

 1 )安装 npm i echarts

 2 )在组建内引入 图形(柱状图 bar。折线图 line。饼状图 pie) 可在echarts 文档中查找

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了在React中实现一级二级路由,我们可以使用React Router。下面是一个示例,演示如何使用React Router实现一级二级路由路由循环: ```javascript import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; // 一级路由组件 import Home from './Home'; import About from './About'; import Contact from './Contact'; // 二级路由组件 import Profile from './Profile'; import Settings from './Settings'; // 一级路由数组 const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact }, ]; // 二级路由数组 const profileRoutes = [ { path: '/profile', exact: true, component: Profile }, { path: '/profile/settings', component: Settings }, ]; // 路由循环 const RouteWithSubRoutes = (route) => ( <Route path={route.path} exact={route.exact} render={(props) => ( <route.component {...props} routes={route.routes} /> )} /> ); // App组件 const App = () => ( <Router> <Switch> {routes.map((route, i) => ( <RouteWithSubRoutes key={i} {...route} /> ))} <Route path="/profile" render={() => ( <CompileRouter routes={profileRoutes} /> )} /> </Switch> </Router> ); export default App; ``` 在上面的代码中,我们首先定义了一级路由二级路由的组件。然后,我们将一级路由二级路由分别存储在`routes`和`profileRoutes`数组中。接下来,我们定义了一个`RouteWithSubRoutes`组件,用于循环渲染路由。最后,在`App`组件中,我们使用`Switch`组件来渲染一级路由,并在二级路由的父级路由中使用`CompileRouter`组件来渲染二级路由

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值