{"id":11698,"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.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/yousufkalim/react-easy-router","tags":["javascript","react","routing","router","react-router","react-router-dom","simple-routing","next","typescript"],"install":[{"cmd":"npm install react-easy-router","lang":"bash","label":"npm"},{"cmd":"yarn add react-easy-router","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-easy-router","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library for building user interfaces.","package":"react","optional":false},{"reason":"Entry point for DOM-specific rendering methods.","package":"react-dom","optional":false},{"reason":"Provides the underlying routing functionality; react-easy-router is built on top of it.","package":"react-router-dom","optional":false}],"imports":[{"note":"This is the default export of the library, primarily used as a component. CommonJS `require` is not supported for v2+ as the package converted to TypeScript and ESM-compatible architecture.","wrong":"const Router = require('react-easy-router');","symbol":"Router","correct":"import Router from 'react-easy-router';"},{"note":"Type import for defining the structure of individual route objects when using TypeScript.","symbol":"RouteObject","correct":"import type { RouteObject } from 'react-easy-router';"},{"note":"Type import for the `isAuthenticated` prop function's signature when using TypeScript.","symbol":"AuthFunction","correct":"import type { AuthFunction } from 'react-easy-router';"}],"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."},"warnings":[{"fix":"Ensure your main application component, where `Router` is used, is rendered within `<BrowserRouter>` from 'react-router-dom'.","message":"As of v2.0.5, `react-easy-router` no longer internally uses `BrowserRouter`. Your application must now explicitly wrap its root component in `BrowserRouter` from `react-router-dom`.","severity":"breaking","affected_versions":">=2.0.5"},{"fix":"Install `react-router-dom`: `npm install react-router-dom@^6.4.0` or `yarn add react-router-dom@^6.4.0`.","message":"Since v2.0.2, `react-router-dom` (specifically version >=6.4.0) is a mandatory peer dependency. It must be installed in your project for `react-easy-router` to function.","severity":"breaking","affected_versions":">=2.0.2"},{"fix":"Ensure your `isAuthenticated` function explicitly returns `false` or the specified success object structure.","message":"The `isAuthenticated` prop expects a function that returns an object like `{ success: true, role: 'yourRole' }` for success, or `false` for failure. Any other return type (e.g., `undefined` or an empty object) might lead to unexpected authentication behavior.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Update to `react-easy-router` version 2.1.1 or later to resolve issues with optional props being enforced.","message":"A bug in versions prior to v2.1.1 caused all props to be treated as required, even if marked optional. This could lead to validation errors during development.","severity":"gotcha","affected_versions":"<2.1.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Wrap your main application component with `<BrowserRouter>` from `react-router-dom`. Example: `<BrowserRouter><App /></BrowserRouter>`","cause":"`react-router-dom`'s `BrowserRouter` component is not wrapping the `react-easy-router`'s `Router` component, which is required since `react-easy-router` v2.0.5.","error":"Error: A <Router> is missing a 'router' prop or a 'history' prop. Please render your <Router> in a React app or use a custom router. Learn more: https://reactrouter.com/docs/en/v6/getting-started/tutorial#wrapping-your-app"},{"fix":"Ensure you pass a valid array of route objects to the `routes` prop: `<Router routes={myRoutesArray} />`.","cause":"The `routes` prop was not passed to the `Router` component, or it was passed as `undefined`.","error":"TypeError: Cannot read properties of undefined (reading 'routes')"},{"fix":"Add checks for `typeof window !== 'undefined'` before accessing browser-only globals within your authentication functions or route elements.","cause":"The `isAuthenticated` function or other authentication logic attempts to access browser-specific APIs (like `localStorage` or `window`) in a server-side rendering (SSR) environment without proper checks.","error":"TypeError: Cannot read properties of null (reading 'getItem')"}],"ecosystem":"npm"}