react-router-context v1.1.7

React Router Context

A React router wrapper based on React Context API

Installation

$ npm install react-router-context

Or

$ yarn add react-router-context

How to use

import { ReactRouterContext } from 'react-router-context';
import { HomePage, UsersPage, UserDetailPage } from '@pages';

function App(){
  return (
    <ReactRouterContext
      defaultRole="viewer"
      routes={[
        { path: '/', element: <HomePage />, params: { title: 'Home'} }
        {
          path: 'users',
          roles: ['admin']
          element: <UsersPage />,
          children: [
            { path: ':userId', element: <UserDetailPage /> }
          ]
        }
      ]}
    />
  )
}

export default App;

Route typing:

type Route = {
  path?: string;
  index?: boolean;
  element?: ReactElement;
  roles?: string[];
  params?: any;
  children?: Route[];
};

For more information about routes, visit the official react-router-dom documentation

ReactRouterContext

Properties

• routes: Property that receives the list of route objects that will be mapped for navigation.
• defaultRole (Optional): Property used to inform the default role, for route access validation.
• browserRouterConfig (Optional): Property used to override BrowserRouter component parameters.

Hooks

useRoutes()

This hook is used to access the list of routes from any functional component, which is linked to the component ReactRouterContext

// HomePage.tsx
import { useRoutes } from 'react-router-context';
import { Link } from 'react-router-dom';

type RouteParams = { title: string };

function HomePage() {
  const routes = useRoutes<RouteParams>();

  return (
    <div>
      <ul>
        {routes
          .filter((item) => !!item.params)
          .map((item, i) => (
            <li Key={String(i)}>
              <Link to={item.path}>{item.params.title}</Link>
            </li>
          ))}
      </ul>
    </div>
  );
}

export default HomePage;

Or you can specify which route object you want to return from the routing tree, passing an array of paths as a property of useRoutes

// HomePage.tsx

...

  /**
  * Passing a paths filter it is possible to
  * return the tree of a specific route
  */
  const userRoutes = useRoutes<RouteParams>(['users']);

...

useRouteRole()

This hook is used to set the role of the current client, it helps in creating rules for page access permissions.

// LoginPage.tsx
import { useRouteRole } from 'react-router-context';

...

const [role, setRole] = useRouteRole();

async function singIn(values: FormValues) {
  await authService.access(values)
    .then((response) => {
      setRole(response.user.role);
      navigate('/panel');
    })
    .catch(() => {
      setRole('viewer');
      navigate('/')
    });
}

...