正文 

当前位置： 首页 > 知识 > java教程

react+react-router+mobx+element打造管理后台系统---react-amdin-element(代码片段)

bbbiu bbbiu     2023-02-19     362

关键词：

react-admin-element，一款基于react的后台管理系统。

那么我们和其他的后台管理系统有什么区别呢？

技术分享图片

 

1. cli工具

为了方便下载使用，我们提供了cli工具

npm install create-react-admin-cli -g

create-react-admin 
技术分享图片
 
这里我们会为您提供两种版本 

1. react-admin-demo

这个版本里是我们推荐里版本，里面包括了我们为您提供的一些封装好的简单功能，以及一些常用的插件

2. react-admin-simple

这个版本主要是为了帮助一些只想要基础功能，却对代码无从下手清除的情况下产生的。 此版本里只拥有路由，面包屑，登录，404功能，其余的多余代码我们已经帮您剔除掉了...

 

2. 精简的路由配置

不知道大家有没有在使用react-router时候发现，虽然同样是router，可是在使用起来的时候实在是没有vue-router在编写router文件时方便，于是我们做了一层简单的封装，让您能够像使用vue-router一样使用react-router

import Home from ‘@/containers/Home‘;
const router = [
        
            name: ‘首页‘,
            path: ‘/‘,
            component: Home,
            type: ‘admin-icon-liebiao‘
        
]
export default router

当您是二级or多级路由时只需要增加children即可

    import Part from ‘@/containers/Part‘;
    import Part1 from ‘@/containers/Part1‘;
    const router = [
        
            name: ‘多级菜单‘,
            path: ‘/part‘,
            component: Part,
            children: 
            [
                
                    name: ‘多级菜单1‘,
                     path: ‘/part1‘,
                    component: Part1,
                    
            ]
        
    ]
    export default router

里面还有一些常用的配置

 * @param boolean [hideChildren] - 左侧菜单该条目下所有均不显示
 * @param boolean [hideInMenu] - 左侧菜单中单条不显示
 * @param boolean [single] - 是否不使用公共组件
 
 hideChildren - 当设置为true时，该菜单下的所有children都不会在左侧菜单栏显示
 hideInMenu - 当设置为true时，仅该菜单条目不会在左侧菜单栏显示
 single - 当设置为true时，左侧菜单和顶部都会隐去，一般我们用于登录页，500等页面
 
 404页面需要单独处理，您只需在项目目录contaniners中的NotFound中编写您的404页面即可

3. 状态管理

在状态管理中，我们没有使用“名气”更大的react-redux，而是使用了更加轻便，更易上手的mobx

在store中创建demo.js

import 
    observable,
    computed
 from ‘mobx‘;


class Router 
    @observable txt = 1;


export default new Router()
复制代码

在任意jsx文件中引用

@inject(‘demo‘)
@observer
class DemoPage extends Component 
    constructor(props) 
        super(props);
    
    componentDidUpdate() 
       console.log(this.props.demo.txt)
    

export default(DemoPage)

更加详细的使用方法这里就不细讲了...

 

 

当然，因为是第一版，里面也不乏有缺点与不足，如果您在使用中发现任何影响您的开发或给您带来不便体验的地方，请您提交issues给我们，我们定会在第一时间帮助您解决在使用中出现的问题... 感谢阅读~

 

 

解决react-router/react-router-domv4history不能访问的问题

首先使用routerimportReact,{Component}from‘react‘;import{BrowserRouter,Route}from‘react-router-dom‘;import{Provider}from‘mobx-react‘;importstoresfrom‘../store/index‘;importBundlefrom‘../components/bundle‘; 查看详情

在 React-Router v4 中以编程方式导航

】在React-Routerv4中以编程方式导航【英文标题】：ProgrammaticallynavigatinginReact-Routerv4【发布时间】：2017-10-2313:57:35【问题描述】：在使用ReactRouterV4完成一些验证后，我如何才能转到新页面？我有这样的事情：exportclassWelcomeFormextendsC... 查看详情

承诺后如何使用react-router重定向到另一个url？

】承诺后如何使用react-router重定向到另一个url？【英文标题】：Howtoredirecttoanotherurlusingreact-routerafterpromise?【发布时间】：2021-05-1600:10:09【问题描述】：constsubmit=e=>e.preventDefault();if(homeEmail==="")alert("PleaseProvideAValidE-Mail")elsedb 查看详情

mianshi

...，mobx、redux等库。react本身没有封装路由操作，可以实用react-router。2.reactcontext？getC 查看详情

使用 React-Router 在页面内链接

】使用React-Router在页面内链接【英文标题】：UsingReact-Routertolinkwithinapage【发布时间】：2015-10-1918:17:50【问题描述】：我正在尝试制作一个锚标记，该标记将链接到同一页面中的某个位置（例如this）但是，React-Router劫持了它，并... 查看详情

mobx+react基础(代码片段)

mobx+reactmobx可以作为一个全局状态管理，可以解决react的复杂的组件间通信问题下载安装mobxnpmimobxmobx-react--save使用mobx（类式组件）//1.先定义一个storeimportmakeAutoObservablefrom'mobx'classStoreusername:string 查看详情

脚手架初始化react项目react-router路由(代码片段)

1，首先创建npminstall-gcreate-react-appcreate-react-appmy-app//my-app项目名称cdmy-app//进入项目npmstart//启动项目2，安装react-router npminstall--savereact-router3.2.1版本3,项目目录我就不介绍了，初识 react加上AntdUI框架写了一个小demo，g 查看详情

mobx

React和MobX是一对强力组合。React通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供React使用。  查看详情

react-router面试题汇总

[react-router]React-Router怎么获取URL的参数？[react-router]在history模式中push和replace有什么区别？[react-router]React-Router4中＜Router＞组件有几种类型？[react-router]React-Router怎么设置重定向？[react-router]React-Router怎么获... 查看详情

text#mobx#react(代码片段)

查看详情

text#mobx#react(代码片段)

查看详情

Jest/React/Mobx：TypeError mobxReact.observer 不是函数

】Jest/React/Mobx：TypeErrormobxReact.observer不是函数【英文标题】：Jest/React/Mobx:TypeErrormobxReact.observerisnotafunction【发布时间】：2021-03-2411:07:09【问题描述】：我正在尝试针对React/Mobx代码运行一个简单的Jest测试，该代码仅渲染一个路由... 查看详情

react中的状态管理---mobx(代码片段)

...Mobx来替代掉redux。Mobx流程图Mobx使用流程创建项目npxcreate-react-appmobx进入项目cdmobx项目抽离yarneject安装mobxmobx-reactyarnaddmobxmobx-react注意࿱ 查看详情

react中的状态管理---mobx(代码片段)

...Mobx来替代掉redux。Mobx流程图Mobx使用流程创建项目npxcreate-react-appmobx进入项目cdmobx项目抽离yarneject安装mobxmobx-reactyarnaddmobxmobx-react注意࿱ 查看详情

在react项目中启用mobx的配置方法

1、安装插件npminstall--save-devbabel-preset-mobxmobxmobx-react2、package.json配置"presets":["mobx"] 参考：https://cn.mobx.js.org/best/decorators.html 查看详情

react+mobx兼容ie11

...也进行持续的维护，只是mobx4存在一些局限性。使用create-react-app官方提供的react-app-polyfill，然后在入口文件index中引入：package.json文件修改： 查看详情

mobx基本概念

...依赖关系，可以使用在任何状态管理的场景，并不仅限于react。结合mobx-react可以用在react中，结合mobx-vue可以用在vue中。mobx的概念与knockout和rxjs中的概念极其相似，相当于将kouckout中的状态管理部分独立出来了。 mobx的基本流... 查看详情

umi+react+mobx+typescript项目

umi官网：https://umijs.org/ 支付宝当家大牛云谦搞得框架，不用自己配webpackbabel那一堆烦人的东西。而且它约定了路由的规则。非常简单容易上手。mobx 的官网：https://cn.mobx.js.org/  用mobx而不用dva主要是因为dva的state是... 查看详情