关于react

网友投稿 315 2023-02-28


关于react

前言

最近把react-router 升级了一下, 在使用react-router-dom 是,子组件使用this.props.history  找不到了,看看官方文档,找了半天也没找到,因为我是在异步执行完后才跳转页面,需要用到push 或者replace,怎么办啊,国内知识都是你复制我的,我复制你的,都特么垃圾。只能去Google,

最终找到了答案:(看代码一目了然)

解决方法

首先使用router

import React, { CompomtKXuvnent } from 'react';

import { BrowserRouter, Route } from 'react-router-dom';

import { Provider } from 'mobx-react';

import stores from '../store/index';

import Bundle from '../components/bundle';

import Hello from 'bundle-loader?lazy!../components/hello.jsx';

// 这是按需加载,对于现在讨论的问题没有影响

const HelloAPP = () => (

{(Hello) => }

);

export default class App extends Component {

constructor(props) {

super(props);

}

render() {

return (

);

};

}

接着是子组件的使用history

import React, { Component } from 'react';

// 需要这步,你要npm 这个,

import PropTypes from 'prop-types';

export default class Hello extends Component {

constructor(props) {

super(props);

}mtKXuv

// 这一步是重点

static contextTypes = {

router: PropTypes.object.isRequired

};

test = () => {

console.log(this.context);

setTimeout(() => {

this.context.router.history.push("/otherPath");

}, 1000);

};

render() {

return (

);

};

}

让我们看看this.context :

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Angular 项目实现国际化的方法
下一篇:简单实现java上传图片文件功能
相关文章

 发表评论

暂时没有评论,来抢沙发吧~