错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义的 react

时间:2021-08-01 06:44:22

标签: javascript node.js reactjs

如果登录成功,我正在尝试路由到主页。但我收到以下错误:

错误:“元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。

检查App"的渲染方法。

App.js

import Home from './Pages/Home/Home.js';
import Login from "./Pages/Login/Login";
import Profile from "./Pages/Profile/Profile";
import Register from "./Pages/Registration/Registration";
import { useContext,Redirect } from "react";
import {AuthContext} from "./Context/AuthContext";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";


function App() {
  const {user} = useContext(AuthContext);
  console.log(user);
  return (
    <div >
      <Router>
        <Switch>
          <Route exact path ='/'>
            {user ? < Home/> : <Register/>}
          </Route>
          <Route path ='/login'>
          {user ? <Redirect to ="/" /> : < Login/> }
            
          </Route>    
          <Route path ='/profile/:username'>
              < Profile/>
          </Route>
          <Route path ='/register'>
            {user ? <Redirect to ="/" /> : < Register/> }
          </Route>

      </Switch>
      </Router>
    </div>
  )}
export default App;

当我尝试不使用“{}”时:

import AuthContext from "./Context/AuthContext";

出现以下错误: “尝试导入错误:'./Context/AuthContext' 不包含默认导出(作为 'AuthContext' 导入)。”

而且我也尝试使用 :

导入

var AuthContext = require("./Context/AuthContext.js");

然后没有错误但没有创建上下文,即用户值未定义。

AuthContext.js

import { createContext } from "react";
import {useReducer} from 'react';
import AuthReducer from './AuthReducer';

const INITIAL_STATE = {
 user : null,
 isFetching : false,
 error : false

}
export const AuthContext = createContext(INITIAL_STATE);

export const AuthContextProvider = ({children})=>{
    const [state, dispatch] = useReducer(AuthReducer, INITIAL_STATE);

    return(
      <AuthContext.Provider value={{
        user : state.user,
        isFetching : state.isFetching,
        error : state.error,
        dispatch,
    }}
    >
        {children}
    </AuthContext.Provider>
)
}

有人可以为此提出解决方案吗?

0 个答案:

没有答案