import { RouterProvider } from '@uhg-abyss/web/ui/RouterProvider';

Usage

All Router objects are passed to this RouterProvider for navigation to work. RouterProvider leverages version 7.0+ of React Router. Find additional resources on our Router component in Router.

import { createRouter } from '@uhg-abyss/web/tools/createRouter';

const Page = ({ title }) => {
  return (
    <div>
      <Router.MetaTags>
        <title>{title}</title>
        <meta name="description" content={title + 'Page'} />
      </Router.MetaTags>
      <Heading css={{ 'abyss-heading-root': { marginTop: '15px' } }}>
        {title} Page
      </Heading>
    </div>
  );
};

const Routes = () => {
  return (
    <Router.Routes>
      <Router.Route path="/" element={<Page title="Home" />} />
      <Router.Route
        path="/getting-started/"
        element={<Page title="Getting Started" />}
      />
      <Router.Route path="/web/ui/router/" element={<Page title="Router" />} />
    </Router.Routes>
  );
};

const router = createRouter(Routes);

export const browser = () => {
  return <RouterProvider router={router} />;
};

History

Use the history prop to set the type of router provider. Types include 'browser', 'hash', and 'memory'. The default is 'browser'.

• 'browser': A router that uses the HTML5 History API (pushState, replaceState, and the PopStateEvent) to keep your UI in sync with the URL.
• 'hash': A router that uses the hash portion of the URL (i.e., window.location.hash) to keep your UI in sync with the URL.
  • Note: Hash history does not support location.key or location.state. Any code or plugin that needs this behavior won't work. As this technique is only intended to support legacy browsers, we encourage you to configure your server to work with type 'browser' instead.
• 'memory': A router that keeps the history of your "URL" in memory (does not read or write to the address bar).

<RouterProvider history="hash">{/* children */}</RouterProvider>

Additional documentation

Teams wanting to use React Router (v7) directly can import from this path to ensure consistent versions across your application:

import { useLocation, useParams } from '@uhg-abyss/web/tools/reactRouterTools';

RouterProvider Props

Prop Name	Type	Default	Description
children	ReactNode	-	The content of the router provider component
disableScroll	boolean	false	Disable auto-scrolling to top of page on location path change
history	string	browser	Set the type of the route provider