如果登录成功,我正在尝试路由到主页。但我收到以下错误:
错误:“元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
检查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>
)
}
有人可以为此提出解决方案吗?