尝试在 react-router 中实现 react-transition-group 会产生错误：'元素类型无效......'答案

【问题标题】：Trying to implement react-transition-group into react-router generates error : 'Element type is invalid ...'尝试在 react-router 中实现 react-transition-group 会产生错误：'元素类型无效......'
【发布时间】：2020-01-17 13:11:59
【问题描述】：

我正在尝试使用 react-transition-group 模块中的 CSSTransition 组件在用户从一条路由切换到另一条路由时实现页面转换。从我下面测试的代码中，它会生成以下错误：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

这是我的代码示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch,  useParams, useLocation } from 'react-router-dom';
import Home from './Home';
import Login from './Login';
import SignUp from './SignUp';
import ManagerSignUp from './ManagerSignUp';
import ManagerLogin from './ManagerLogin';
import CreateEvent from './CreateEvent';
import RegisterVenue from './RegisterVenue';
import Dashboard from './Dashboard';
import ManagerDashboard from './ManagerDashboard';
import EventPage from './EventPage';
import './assets/pageTransitions.css'
import {
  TransitionGroup,
  CSSTransition
} from "react-transition-group";

const routes = [
  {path: '/', name: 'Home', Component: Home },
  {path: '/login', name: 'Login', Component: Login },
  {path: '/signup', name: 'Signup', Component: SignUp },
  {path: '/manager_signup', name: 'Manager Signup', Component: ManagerSignUp },
  {path: '/manager_login', name: 'Manager Login', Component: ManagerLogin },
  {path: '/eventcreate', name: 'Event Create', Component: CreateEvent },
  {path: '/registervenue', name: 'Register Venue', Component: RegisterVenue },
  {path: '/dashboard', name: 'Dashboard', Component: Dashboard },
  {path: '/manager_dashboard', name: 'Manager Dashboard', Component: ManagerDashboard },
  {path: '/event/:uid', name: 'Event Page', Component: EventPage },
]


export default function App() {
  // let {location} = window.location.origin
  return (
    <React.Fragment>
      <Router>
        <Switch>
          <Route>
            {routes.map(({ path, Component }) => (
              <Route key={path} exact path={path}>
                {({match}) => (
                  <CSSTransition
                    in={match != null}
                    timeout={300}
                    classNames="page"
                    unmountOnExit
                  >
                    <Component />
                  </CSSTransition>
                )}
              </Route>
            ))}
          </Route>
        </Switch>
      </Router>
    </React.Fragment>
  );
}

经过多次交叉检查后，我无法确定此错误的性质。我需要帮助确定为什么会发生这种情况以及如何解决它。

【问题讨论】：

标签： javascript reactjs react-router-dom react-transition-group

【解决方案1】：

我在这里发现了一些错误，用这个替换你的 Switch 代码

您没有在此处传递组件，而是将所有 Route 放入标签中，这是错误的

    <Switch>

        {routes.map(({ path, Component }) => (
          <Route key={path} exact path={path} component={Component} >
          </Route>
        ))}

    </Switch>

对于 CSSTransition，您可以创建一个 HOC（高阶组件）并将其与您的所有组件一起使用，例如 component={HOC(Component)}

HOC：

import React , {useState,useEffect} from 'react';
import {
  TransitionGroup,
  CSSTransition
} from "react-transition-group";

export default (ComposedComponent) => {
  return (props) =>{  

  /* HOC : component is like write once and use any where.
    You can pass your any component it will return with your CSSTransition 
    for that component  */

    retun (
            <ComposedComponent {...props}>  
            {({match}) => (
              <CSSTransition
                in={match != null}
                timeout={300}
                classNames="page"
                unmountOnExit
              >
                 {props.children}
              </CSSTransition>
            )}                  
            </ComposedComponent>
    )
  };
};

最后一步是将您的 HOC 导入文件并将组件传递给它，就像

   import HOC from 'path of HOC'

  <Route key={path} exact path={path} component={HOC(Component)} >

【讨论】：