useRouter

Reference

A hook that provides access to the browser's routing state. Use it to read the current URL, read URL parameters, or programmatically navigate to other Protrak pages.

const { protrakUtils } = React.useContext(customWidgetContext);
const { useRouter } = protrakUtils;

const router = useRouter();

Returned Properties

Property	Type	Description
router.pathname	string	Current URL path, e.g. '/Agreement/view/abc-123'
router.query	object	Merged URL path params + query string params
router.navigationState	object	State object passed during redirect / replace
router.redirect(path, state?)	function	Navigate to a new path (pushes a new history entry)
router.replace(path, state?)	function	Navigate without adding a new history entry (replaces current)
router.history	object	Raw react-router history object
router.location	object	Raw react-router location object
router.match	object	Raw react-router match object

Caveats

• Use router.redirect instead of window.location.href to navigate within Protrak — direct window.location assignments bypass React Router and cause a full page reload.
• router.query combines both path parameters (:typeName, :instanceId) and query-string parameters (?filter=active).

---

Usage Examples

Navigate to a type's dashboard

function BackToDashboardWidget(pageContext) {
  const { protrakUtils, protrakComponents } =
    React.useContext(customWidgetContext);
  const { useRouter } = protrakUtils;
  const { Button, ButtonEnums } = protrakComponents;

  const router = useRouter();

  return (
    <Button
      text={`Back to ${pageContext.instanceType} List`}
      appearance={ButtonEnums.Appearance.Link}
      onClick={() => router.redirect(`/${pageContext.instanceType}/dashboard`)}
    />
  );
}

Navigate to the create page

router.redirect(`/${pageContext.instanceType}/create`);

Navigate to an instance view page

router.redirect(`/${typeName}/view/${instanceId}`);

Read current URL parameters

function UrlInspectorWidget(pageContext) {
  const { protrakUtils, protrakComponents } =
    React.useContext(customWidgetContext);
  const { useRouter } = protrakUtils;
  const { Box, Text } = protrakComponents;

  const router = useRouter();

  return (
    <Box>
      <Text>Current path: {router.pathname}</Text>
      <Text>Type: {router.query.typeName}</Text>
      <Text>Instance: {router.query.instanceId}</Text>
    </Box>
  );
}

Pass state when navigating

// Navigate with state
router.redirect('/Agreement/view/abc-123', { fromWidget: 'MyWidget' });

// Read state on the destination page
const { navigationState } = useRouter();
console.log(navigationState.fromWidget); // 'MyWidget'