ARouter

Simple frontend routing library for React using TypeScript & React hooks.

How to install

yarn install a-router

How to use

const Sample: React.SFC<{}> = (props) => {
  const routes = [
    { path: '/', component: RootComponent },
    { path: '/entries', component: EntriesComponent },
    { path: '/entries/:id(.:format)', component: EntryDetailsComponent, constraints: { id: /\d+/, format: /html|json/ } }
  ];

  return useRoutes(routes);
};

API

RouterLocation

• pathname: string - location pathname
• search: string - search part of the location url
• hash: string - hash part of the location url
• queryParams: { [key: string]: any } - object representing extracted query parameters

Route

• path: string - route path which will be matched against current location
• constraints?: { [key: string]: RegExp } - route constraints (object with parameter names and regular expressions as constraints)
• exact?: boolean - flag which indicates whether route path should match current location exactly or not
• component: React.ComponentType<{ match: T | undefined; location: RouterLocation; }> - component to be rendered for this route

useRoutes hook params

• routes: Array<Route<any>> - array of routes to match against router location

usePrompt hook params

• visible: boolean - flag which indicates whether navigation to other paths/locations has to be blocked or not
• message: string - message to show when the navigation is blocked and user still tried to navigate to other path/location

useRedirect hook params

• from: string - redirect source path
• to: string - redirect destination path

List of props available in route components

• match: T | undefined - list of query parameters matched for the route
• location: RouterLocation - current router location

Licence

GPLv3

Copyright hck, 2019