[英]Trying to implement react-transition-group into react-router generates error : 'Element type is invalid ...'
我正在尝试使用 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>
);
}
多次交叉检查后,我无法确定此错误的性质。 我需要帮助确定为什么会发生这种情况以及如何解决它。
我在这里发现了一些错误,用这个替换你的 Switch 代码
您没有在此处传递组件,而是将所有 Route 放在错误的标记中
<Switch>
{routes.map(({ path, Component }) => (
<Route key={path} exact path={path} component={Component} >
</Route>
))}
</Switch>
对于 CSSTransition,您可以创建一个 HOC(高阶组件)并将其与所有组件一起使用,例如component={HOC(Component)}
高阶:
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)} >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.