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屋！