[英]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.