Type Route

Type Route

  • Docs
  • GitHub
  • v0.6.0

›Types

Introduction

  • Getting Started
  • Simple React Example

Guides

  • Code Splitting
  • Complex Route Parameters
  • Custom Link Behavior
  • Custom Query String
  • Data Fetching
  • Nested and Similar Routes
  • No Match (404)
  • Page Layout
  • Preventing Navigation
  • Programmatic Navigation
  • Redirects
  • Rendering Links
  • Route Parameters
  • Scroll Restoration
  • Server Side Rendering
  • Styling of Links for the Currently Active Route
  • Type Route without React
  • Wildcard Routes
  • Previous Release Docs
  • Guide Missing?

API Reference

    <ParameterDefinition>

    • param

    <RouteDefinition>

    • defineRoute
    • extend

    <RouteGroup>

    • createGroup
    • has

    <Route>

    • action
    • href
    • link
    • name
    • params
    • push
    • replace

    <Router>

    • createRouter
    • useRoute
    • RouteProvider
    • routes
    • session

    Types

    • Link
    • QueryStringSerializer
    • Route
    • RouterOpts
    • SessionOpts
    • ValueSerializer

    Miscellaneous

    • noMatch
    • preventDefaultLinkClickBehavior
Edit

Route

The Route type is part of the TypeScript specific API for Type Route. It is a helper type useful for getting the type of a particular route. Here's an example:

import { createRouter, defineRoute, Route, param } from "type-route";

const user = defineRoute(
  {
    userId: param.path.string
  },
  p => `/user/${p.userId}`
);

const { routes } = createRouter({
  home: defineRoute("/"),
  user,
  userSettings: user.extend("/settings"),
  userActivity: user.extend("/activity")
});

const groups = {
  user: createGroup([
    routes.user,
    routes.userSettings,
    routes.userActivity
  ])
}

Given the above code the type Route<typeof routes> would evaluate to this type:

  { name: "home", params: {}, ... }
| { name: "user", params: { userId: string }, ... }
| { name: "userSettings", params: { userId: string }, ... }
| { name: "userActivity", params: { userId: string }, ... }
| { name: false, params: {}, ... }

And Route<typeof routes.user> would provide this type:

{ name: "user", params: { userId: string }, ... }

And finally Route<typeof userGroup> would result in this type:

  { name: "user", params: { userId: string }, ... }
| { name: "userSettings", params: { userId: string }, ... }
| { name: "userActivity", params: { userId: string }, ... }

The Route type can be useful in circumstances such as declaring the Props of a component.

import { Route } from "type-route";
import { routes } from "./router";

type Props = {
  route: Route<typeof routes.userSettings>;
};

export function UserSettingsPage(props: Props) {
  const { route } = props;

  return <div>Settings for user {route.params.userId}</div>;
}
← QueryStringSerializerRouterOpts →
Type Route is a Type Hero project  ·  Copyright © 2020