Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Router
✓ import Router from 'react-easy-router';
✗ const Router = require('react-easy-router');
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.
RouteObject
✓ import type { RouteObject } from 'react-easy-router';
Type import for defining the structure of individual route objects when using TypeScript.
AuthFunction
✓ import type { AuthFunction } from 'react-easy-router';
Type import for the `isAuthenticated` prop function's signature when using TypeScript.
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.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import Router from 'react-easy-router';
// Placeholder components
const Login = () => <div>Login Page</div>;
const Admins = () => <div>Admins Dashboard</div>;
const Admin = () => <div>Admin Detail</div>;
const Users = () => <div>Users List</div>;
const User = () => <div>User Detail</div>;
const NotFound = () => <div>404 - Page Not Found</div>;
const routes = [
{ path: '/', navigate: '/login' },
{ path: '/login', element: <Login /> },
{
path: '/admins',
element: <Admins />,
children: [{ path: '/admin', element: <Admin /> }],
},
{
path: '/users',
element: <Users />,
children: [{ path: '/user', element: <User /> }],
},
{
path: '/admin',
element: <Admin />,
protected: true,
roles: ['admin', 'manager'], // Optional: Role specific screen
failureRedirect: '/login', // Optional: Default is '/' if not specified
},
{ path: '*', element: <NotFound /> },
];
function App() {
// Function can resolve/reject or return true/false
const checkAuth = () => {
const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
// Simulate authentication based on a token and return a role
if (token === 'admin-token') {
return { success: true, role: 'admin' };
} else if (token === 'manager-token') {
return { success: true, role: 'manager' };
} else {
return false; // Not authenticated or no valid token
}
};
return <Router routes={routes} isAuthenticated={checkAuth} />;
}
// Render the app
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Errors
Common errors & fixes
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
`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.
fixWrap your main application component with `<BrowserRouter>` from `react-router-dom`. Example: `<BrowserRouter><App /></BrowserRouter>`
TypeError: Cannot read properties of undefined (reading 'routes')
The `routes` prop was not passed to the `Router` component, or it was passed as `undefined`.
fixEnsure you pass a valid array of route objects to the `routes` prop: `<Router routes={myRoutesArray} />`. TypeError: Cannot read properties of null (reading 'getItem')
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.
fixAdd checks for `typeof window !== 'undefined'` before accessing browser-only globals within your authentication functions or route elements.
Audit
Dependencies
reactrequiredCore library for building user interfaces.
react-domrequiredEntry point for DOM-specific rendering methods.
react-router-domrequiredProvides the underlying routing functionality; react-easy-router is built on top of it.