Question

我试图在我的项目中添加一些css动画，然后我收到了这些错误。

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Route`.
    in Route (created by Routes)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Routes)
    in Routes

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Route`.

这是我的代码

import "../css/main.scss";
import React from 'react';
import ReactDOM from 'react-dom';
import { Route,BrowserRouter,Link } from 'react-router-dom';
import Body from './home';
import Detail from './detail';
import Form from './form';
import { CSSTransitionGroup } from 'react-transition-group';

class Routes extends React.Component{
  render(){
    return (
      <BrowserRouter>
        <Route render={( { location } )=>(
        <div id="display">

          <CSSTransitionGroup transitionName="fade" transitionEnterTimeout={400} transitionLeaveTimeout={250} >

        <Route exact path="/voteapp/" component={Body} location={location} key={location.key} />
        <Route exact path="/voteapp/addvote/" component={Form} location={location} key={location.key} />
        <Route path="/voteapp/display/:pk" component={Detail} location={location} key={location.key} />

      </CSSTransitionGroup>

        </div>
      )} />
    </BrowserRouter>
    );
  }
}

ReactDOM.render(<Routes />,document.getElementById("content"));

相关的套餐信息：

"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-transition-group": "^2.1.0"

当我在代码中注释CSSTransitionGroup标记时，其他一些工作正常。我导入模块的方式有问题吗？

Answer 1

看起来像

import { CSSTransitionGroup } from 'react-transition-group';

不再受支持，您应该（如果需要安装）并导入ReactCSSTransitionGroup

import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup'

并且它将起作用。

而BTW我认为你应该在转换标记和路由之间加上<Switch>，这样你只能在Switch上处理的位置和关键参数。或者我使用的是Transition和Switch的组合：https://github.com/melounek/switch-css-transition-group

使用React路由器和CSSTransitionGroup导致错误

1 个答案: