嘿，我不能用 HOC 包裝我的路由組件。我正在使用 react-router-dom v6 但我無法完成這項作業
這是我的實作：
<Route path="/dashboard" element={AuthGuard(<Dashboard />)} />
特設：
import React from "react";
import { Navigate } from "react-router-dom";
import { firebase } from "../firebase";
const AuthGuard = (Component) => {
class AuthHoc extends React.Component {
authCheck = () => {
const user = firebase.auth().currentUser;
console.log("USER:: ", user);
if (user) {
return <Component {...this.props} />;
} else {
return <Navigate to="/" />;
}
};
render() {
return this.authCheck();
}
}
return AuthHoc;
};
export default AuthGuard;
我得到這個錯誤：
函式作為 React 子級無效。如果您回傳一個組件而不是從渲染中回傳，則可能會發生這種情況。或者也許你打算呼叫這個函式而不是回傳它
uj5u.com熱心網友回復：
就像錯誤說您將函式放置為反應子一樣。所以元素實際上需要是一個有效的反應組件。如果您回傳有效的 jsx，那么您可能可以先運行該函式，然后將其放置在 routes 元素屬性中。您的 AuthGuard 功能也可以大大簡化。像這樣：
import Dashboard from './Dashboard'
const AuthGuard = (Component) => (props) => {
const user = firebase.auth().currentUser;
console.log("USER:: ", user);
return user ? <Component {...props} /> : <Navigate to="/" />;
}
const Dash = AuthGuard(Dashboard)
<Route path="/dashboard" element={<Dash />} />
或者您可以AuthGuard在匯出之前將儀表板包裝在您的中，如下所示：
export default AuthGuard(Dashboard)
但是如果你想把它放在AuthGuard路由的 element 屬性中，那么你必須把它變成一個組件，這樣你就可以像這樣包裝受保護的組件：
<Route path="/dashboard" element={<AuthGuard><Dashboard /></AuthGuard>)} />
然后您的 AuthGuard 組件將如下所示：
const AuthGuard = ({children}) => {
const user = firebase.auth().currentUser;
console.log("USER:: ", user);
return user ? children : <Navigate to="/" />;
}
或者您可以執行以下操作并將組件作為道具傳遞。
const AuthGuard = ({Component}) => {
const user = firebase.auth().currentUser;
console.log("USER:: ", user);
return user ? Component : <Navigate to="/" />;
}
<Route path='/dashboard' element={<AuthGuard Component={<Dashboard />} />}/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406373.html
標籤：