英文:
React Router v6, guarded routes using Context API
问题
createBrowserRouter 使用 React Router，可以在此上下文中访问AppContext 信息。你可以通过以下方式来实现在你的场景中访问上下文信息:
import { useNavigate, useLocation } from 'react-router-dom';function ProtectedRoute({ element: Component, ...rest }) {const ctx = useContext(AppContext);const navigate = useNavigate();const location = useLocation();if (ctx.token !== "") {return <Component {...rest} />;} else {// Redirect to the login page and preserve the current location statenavigate('/login', { state: { from: location } });return null;}}
通过使用useNavigate 和 useLocation 钩子，你可以轻松地在用户未登录时将用户重定向到登录页面，并在登录后返回到原来的页面。
英文:
I have the following setup:
App.js
import AppContext from './context/AppContext.js';import router from './routes/routes.js';function App() {const [token, setToken] = useState("");function login(token) {setToken(token);}return (<React.StrictMode><AppContext.Provider value={{ token, login }}><RouterProvider router={router} /></AppContext.Provider></React.StrictMode>);}export default App;
routes.js
export default createBrowserRouter([{path: "/",element: <Root />,children: [{path: "home",element: <Home />},{path: "admin",element: <ProtectedRoute element={Admin} />},{path: "login",element: <Login />}]}]);
ProtectedRoute.js
export default function ProtectedRoute({ element: Component, ...rest }) {const ctx = useContext(AppContext);return (ctx.token !== "" ? <Component /> : <Navigate to="/login" />);}
I want to be able check if the user is logged in by accessing information from a context, however the returned object always contains the default values. Is there a way to access context information with createBrowserRouter in this scenario?
答案1
得分: 2
The protected route component should be refactored to be rendered as a layout route component by rendering an Outlet instead of some passed prop.
import { Navigate, Outlet } from 'react-router-dom';export default function ProtectedRoute() {const { token } = useContext(AppContext);return token? <Outlet />: <Navigate to="/login" replace />;}
export default createBrowserRouter([{path: "/",element: <Root />,children: [{ path: "home", element: <Home /> },{element: <ProtectedRoute />,children: [{path: "admin",element: <Admin />},// ... other protected routes],},{ path: "login", element: <Login /> }// ... other unprotected routes]}]);
英文:
The protected route component should be refactored to be rendered as a layout route component by rendering an Outlet instead of some passed prop.
import { Navigate, Outlet } from 'react-router-dom';export default function ProtectedRoute() {const { token } = useContext(AppContext);return token? <Outlet />: <Navigate to="/login" replace />;}
export default createBrowserRouter([{path: "/",element: <Root />,children: [{ path: "home", element: <Home /> },{element: <ProtectedRoute />,children: [{path: "admin",element: <Admin />},// ... other protected routes],},{ path: "login", element: <Login /> }// ... other unprotected routes]}]);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论