javascript - React-Router4 使用react-transition-group后报错
本文介绍了javascript - React-Router4 使用react-transition-group后报错的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
想实现路由切换时有过渡效果,代码参考了官网的DEMO: https://reacttraining.com/rea... 但不知道为何会报元素类型无效错误。
具体代码
import React, { Component } from "react";
import styles from "./style.scss";
import createHistory from 'history/createHashHistory'
import { CSSTransitionGroup } from 'react-transition-group'
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Navigation from "./views/navigation";
import ViewIndex from "./views/viewIndex";
import About from "./views/about";
import DatePickerView from './views/datepickerView.jsx';
const history = createHistory()
class Routers extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Router history={history}>
<Route render={({location}) => {
return (
<div className={styles.right_area}>
<div className={styles.h100} key={location.path}>
// 这里使用了CSSTransitionGroup
<CSSTransitionGroup
transitionName="fade"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
<Route key={location.key} location={location} component={ViewIndex} path="/" exact />
<Route key={location.key} location={location} component={DatePickerView} path="/datepickerview" />
<Route key={location.key} location={location} component={About} path="/about" />
</CSSTransitionGroup>
</div>
</div>
)
}} />
</Router>
);
}
}
export default Routers;
报错信息如下
解决方案
react-transition-group因版本升级用法改变,参考https://github.com/reactjs/re...
这篇关于javascript - React-Router4 使用react-transition-group后报错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文