我撰寫此代碼用于在 React App 中創建登錄表單。它使用了 Route 庫版本 6。但它不適用于return <Navigate to = "/login/">. 我想重定向未登錄的人。
PrivateRoute.js
import { useNavigate} from 'react-router-dom';
import { useAuthContext } from '../AuthContext';
const PrivateRoute = ({ children }) => {
const { user } = useAuthContext();
const Navigate = useNavigate();
console.log(user);
if (user) {
return children;
} else {
return <Navigate to="/login"/>; //→Error
}
};
export default PrivateRoute;
應用程式.js
import Home from './components/Home';
import SignUp from './components/SignUp';
import Login from './components/Login';
import { AuthProvider } from './AuthContext';
import {BrowserRouter,Route,Routes,useNavigate} from 'react-router-dom';
import PrivateRoute from './components/PrivateRoute';
function App() {
return (
<AuthProvider>
<div style={{ margin: '2em' }}>
<BrowserRouter>
<Routes>
<Route path="/" element={<PrivateRoute><Home/></PrivateRoute>}></Route>
<Route path="/signup" element={<SignUp/>}></Route>
<Route path="/login" element={<Login/>}></Route>
</Routes>
</BrowserRouter>
</div>
</AuthProvider>
);
}
export default App;
錯誤資訊
react-dom.development.js:14169 Uncaught Error: Component(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
uj5u.com熱心網友回復：
useNavigate回傳一個函式而不是一個組件。
你可能想要類似的東西
const PrivateRoute = ({ children }) => {
const { user } = useAuthContext();
const navigate = useNavigate();
if (!user) {
navigate("/login");
return <></>;
}
return children;
};
uj5u.com熱心網友回復：
react-router-dom 附帶兩個組件 { Navigate, useNavigate }。如果你想使用 Navigate 組件，你可以直接匯入它然后使用它。
import { Navigate } from 'react-router-dom' // import it directly
const PrivateRoute = ({ children }) => {
const { user } = useAuthContext();
if (user) {
return children;
} else {
return <Navigate to="/login" />
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/451901.html
標籤：javascript 反应
上一篇：單擊觸發時框關閉