{"id":18717,"library":"react-router-guards","title":"react-router-guards","description":"Provides a middleware API for React Router (v5), allowing developers to run guard functions between navigation and route rendering. Currently at version 1.0.2, it is stable but not actively maintained (last update 2019). Key features include GuardProvider and GuardedRoute components, support for meta data on routes, loading/error components, and TypeScript types. Unlike simple auth wrappers, it offers a full lifecycle with next() callbacks for redirects, async guards, and error handling.","status":"maintenance","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/upstatement/react-router-guards","tags":["javascript","react","router","guards","guard","loading","error","middleware","typescript"],"install":[{"cmd":"npm install react-router-guards","lang":"bash","label":"npm"},{"cmd":"yarn add react-router-guards","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-router-guards","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency - uses hooks (>=16.8.0)","package":"react","optional":false},{"reason":"Peer dependency - designed to work with React Router v5","package":"react-router-dom","optional":false}],"imports":[{"note":"Default export is not available; use named imports only.","wrong":"const GuardProvider = require('react-router-guards').GuardProvider","symbol":"GuardProvider","correct":"import { GuardProvider } from 'react-router-guards'"},{"note":"Named export, not default.","wrong":"import GuardedRoute from 'react-router-guards'","symbol":"GuardedRoute","correct":"import { GuardedRoute } from 'react-router-guards'"},{"note":"The third parameter must be named 'next' for the guard API to function; renaming breaks middleware.","wrong":"const requireLogin = (to, from, callback) => { callback(); }","symbol":"next function","correct":"const requireLogin = (to, from, next) => { next(); }"}],"quickstart":{"code":"import React from 'react';\nimport { BrowserRouter, Switch } from 'react-router-dom';\nimport { GuardProvider, GuardedRoute } from 'react-router-guards';\n\nconst Home = () => <div>Home</div>;\nconst Login = () => <div>Login</div>;\nconst Loading = () => <div>Loading...</div>;\nconst Error = () => <div>Error</div>;\n\nconst requireAuth = (to, from, next) => {\n  const isLoggedIn = localStorage.getItem('token');\n  if (to.meta.auth && !isLoggedIn) {\n    next.redirect('/login');\n  } else {\n    next();\n  }\n};\n\nfunction App() {\n  return (\n    <BrowserRouter>\n      <GuardProvider guards={[requireAuth]} loading={Loading} error={Error}>\n        <Switch>\n          <GuardedRoute exact path=\"/login\" component={Login} />\n          <GuardedRoute exact path=\"/\" component={Home} meta={{ auth: true }} />\n        </Switch>\n      </GuardProvider>\n    </BrowserRouter>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Sets up guard middleware with a loading component, an auth guard that redirects unauthenticated users, and meta data on routes."},"warnings":[{"fix":"Use react-router-dom v5 or consider migrating to React Router v6 with alternative guard solutions.","message":"Package last updated in 2019; compatible only with React Router v5, not v6.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure every guard calls next() or next.redirect() in all code paths.","message":"Guard functions must call next() exactly once; otherwise route may hang or render incorrectly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Provide a loading component to avoid blank screen during async guard resolution.","message":"The 'loading' prop on GuardProvider should be a React component, not null or undefined when async guards are used.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Define guard as (to, from, next) => ... and ensure exactly three parameters.","cause":"The 'next' parameter in guard function is undefined due to incorrect signature (using wrong parameter count or names).","error":"TypeError: Cannot read property 'redirect' of undefined"},{"fix":"Update React to >=16.8.0 using 'npm install react@latest'.","cause":"Installed package with React version older than 16.8.0 (hooks not supported).","error":"Warning: React version mismatch. Expected >=16.8.0."},{"fix":"Install react-router-dom v5: 'npm install react-router-dom@5.0.0'.","cause":"Missing peer dependency react-router-dom.","error":"Module not found: Can't resolve 'react-router-dom'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}