{"library":"react-easy-router","title":"React Easy Router","description":"react-easy-router is a declarative routing library for React applications that significantly simplifies the configuration of routes by building upon `react-router-dom`. Currently at version 2.2.0, it offers an object-based approach to defining routes, supporting dynamic segments, navigation, redirection, and protected routes with optional role-based access control. Recent releases indicate an active development cycle, with version 2.1.0 converting the entire architecture to TypeScript and subsequent releases adding features like multiple role authentication and type improvements. It differentiates itself by abstracting away much of `react-router-dom`'s direct component usage, providing a more concise API for common routing patterns and built-in authentication hooks. This package requires `react-router-dom` version 6.4.0 or later to be installed as a peer dependency, and the application must be wrapped in `BrowserRouter` externally.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-easy-router"],"cli":null},"imports":["import Router from 'react-easy-router';","import type { RouteObject } from 'react-easy-router';","import type { AuthFunction } from 'react-easy-router';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { BrowserRouter } from 'react-router-dom';\nimport Router from 'react-easy-router';\n\n// Placeholder components\nconst Login = () => <div>Login Page</div>;\nconst Admins = () => <div>Admins Dashboard</div>;\nconst Admin = () => <div>Admin Detail</div>;\nconst Users = () => <div>Users List</div>;\nconst User = () => <div>User Detail</div>;\nconst NotFound = () => <div>404 - Page Not Found</div>;\n\nconst routes = [\n  { path: '/', navigate: '/login' },\n  { path: '/login', element: <Login /> },\n  {\n    path: '/admins',\n    element: <Admins />,\n    children: [{ path: '/admin', element: <Admin /> }],\n  },\n  {\n    path: '/users',\n    element: <Users />,\n    children: [{ path: '/user', element: <User /> }],\n  },\n  {\n    path: '/admin',\n    element: <Admin />,\n    protected: true,\n    roles: ['admin', 'manager'], // Optional: Role specific screen\n    failureRedirect: '/login', // Optional: Default is '/' if not specified\n  },\n  { path: '*', element: <NotFound /> },\n];\n\nfunction App() {\n  // Function can resolve/reject or return true/false\n  const checkAuth = () => {\n    const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;\n\n    // Simulate authentication based on a token and return a role\n    if (token === 'admin-token') {\n      return { success: true, role: 'admin' };\n    } else if (token === 'manager-token') {\n      return { success: true, role: 'manager' };\n    } else {\n      return false; // Not authenticated or no valid token\n    }\n  };\n\n  return <Router routes={routes} isAuthenticated={checkAuth} />;\n}\n\n// Render the app\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\n  <React.StrictMode>\n    <BrowserRouter>\n      <App />\n    </BrowserRouter>\n  </React.StrictMode>\n);\n","lang":"typescript","description":"Demonstrates basic usage of `react-easy-router` with a defined array of routes, including nested, dynamic, and protected routes with role-based authentication. It also correctly wraps the application in `BrowserRouter` as required.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}