react
天渺工作室
全栈工程师+设计师+业余音乐制作人
展开
-
react-router v6嵌套路由简单案例
react-router V6版本路由用法和V5用法差距较大,接一个简单的使用案例新版本组件也开始使用函数式组件+hooks"react-router-dom": "^6.2.1",1.入口mainimport "./App.css";import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";import Index from "./modules/index/Index";import E.原创 2022-03-13 02:09:29 · 1554 阅读 · 0 评论 -
Redux及React-redux的简单使用
在react项目中使用redux的简单案例1.安装reduxnpm install redux --save2.使用redux store目录文件分配原创 2021-08-07 23:19:18 · 253 阅读 · 0 评论 -
mobx6使用案例
PS:mobx6版本以后官方不建议使用@observable装饰器了 可看官方案例https://mobx.js.org/the-gist-of-mobx.html脚手架 create-react-app目录 一、安装二、配置package.json三、定义mobx的store四、在页面中使用mobx,并且通过action 改变mobx一、安装//npm yarn 随需求,尽量不要混用,混用有些资源可能会出现掉包yarn add mobxy...原创 2021-07-08 23:46:41 · 1148 阅读 · 0 评论 -
react-router路由跳转,react-router5.x 的配置及其页面跳转方法和js跳转方法
上次用react-router 的时候 还是3.x 很久不用 已经到react-router5.x 了废话不多说 上代码配置react: ^16.8.6,react-dom: ^16.8.6,react-router: ^5.0.0,react-router-dom: ^5.0.0,路由配置import {HashRouter as Router,Route...原创 2019-06-02 23:23:03 · 3921 阅读 · 0 评论 -
react-mobx使用案例
脚手架 create-react-app一、安装//npm yarn 随需求,尽量不要混用,混用有些资源可能会出现掉包yarn add mobxyarn add mobx-react// 版本号"mobx": "^6.3.2","mobx-react": "^7.2.0",二、配置package.json1.把隐藏的webpack暴露出来,释放之前记得请先提交代码 git commit 一次yarn run eject2.安装@babel/plugin-prop..原创 2021-06-27 15:04:27 · 486 阅读 · 1 评论 -
mobx对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig“ 或 “jsconfig“ 中设置 “experimentalDecorators“ 选项以删除此警告
在react中引入mobx,vscode提示对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig“ 或 “jsconfig“ 中设置 “experimentalDecorators“ 选项以删除此警告配置一下vscode配置就行。window系统:1.vscodea左下角齿轮设置 => 设置2.搜索experimentalDecorators3.勾选Mac系统:1. code => 首选项 =>设置2.搜索experime...原创 2021-06-13 04:04:57 · 214 阅读 · 0 评论 -
react嵌套路由(多重路由)重定向,重定向到404页面,路由重定向
在react 中,路由重定向的核心就是Redirect 的,不论是单层路由还是多层import { HashRouter,BrowserRouter, Route,Router, Link, Redirect, Switch} from "react-router-dom";import Header from './components/Header';import Login from './page/Login/index';import Register from './page/Log原创 2021-05-09 23:23:03 · 2090 阅读 · 0 评论 -
react withRouter和connect 同时使用的案例
在react中,如果遇到redux的connect 和 一般组件跳转的withRouter 同时使用...import React from 'react';import {connect} from 'react-redux'import { withRouter } from "react-router-dom";class MyHeader extends Component {}const mapStateToProps=(state)=>{ return .原创 2021-03-21 01:13:27 · 1067 阅读 · 0 评论