useRouter.md

useRouter([options])

Create a router

Syntax

export default function App() {
  const provide = useRouter();
  return (
    <div className="App">
      {provide((parts, query, { throw404 }) => {
        try {
          switch (parts[0]) {
            case undefined:
              return <WelcomePage />
            case 'categories':
              return <CategoryPage />
            case 'forums':
              return <ForumPage />
            default:
              throw404();
          }
        } catch (err) {
          return <ErrorPage error={err} />
        }
      })}
    </div>
  );
}

Parameters

• options - <Object> Object containing router options

Options

• basePath - <string> The base path of the app (default: '/')
• location - <string> or <URL> The initial location (default: globalThis.location)
• trailingSlash - <boolean> Whether URLs should end with a trailing slash (default: false)
• transitionLimit - <number> Maximum transition time in millisecond (default: 100)
• createURL - <function> Function for creating URLs from parts and query (default: standard handler)
• parseURL - <function> Function for extracting parts and query from URLs (default: standard handler)
• applyURL - <function> Function for applying the current URL to the environment (default: standard handler)

Return value

A function with three arguments: parts, query, and methods. These are the same as the objects returned by useRoute.

Methods

• pushing - Use pushState when query variables are changed
• replacing - Use replaceState when path parts are changed
• rethrow - Throw error caught at error boundary
• throw404 - Throw RouteError
• trap - Capture errors or detour events
• detour - Jump to a different location as though a link has been clicked
• isDetour - Return true if the error object is an instance of RouteChangePending