Type Route

Type Route

  • Docs
  • GitHub
  • v0.6.0

›Guides

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

Code Splitting

The file where you create your router should typically be kept in the main bundle of your application. Since a Type Route route is just a piece of application state the strategies you'll need to ensure code splitting works properly while rendering your application will not change. In React applications React provides the lazy utility for dynamically imported components. Which components specifically should be used in conjunction with the lazy utility will vary from application to application. In many cases it will be appropriate to wrap the top level page components that correspond to each route with this helper.

router.ts

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

export const { useRoute, routes } = createRouter({
  home: defineRoute("/"),
  user: defineRoute(
    {
      userId: param.path.string
    },
    p => `/user/${p.userId}`
  )
});

HomePage.tsx

import React from "react"

export default function HomePage() {
  return <div>Home</div>;
}

UserPage.tsx

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

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

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

  return <div>User {route.params.userId}</div>;
}

App.tsx

import React, { useEffect } from "react";

const HomePage = React.lazy(() => import("./HomePage"));
const UserPage = React.lazy(() => import("./UserPage"));

function App() {
  const route = useRoute();

  return (
    <>
      <nav>
        <a {...routes.home().link}>Home</a>
        <a {...routes.user({ userId: "abc" }).link}>User "abc"</a>
      </nav>
      <React.Suspense fallback={<div>Loading</div>}>
        {route.name === "home" && <HomePage/>}
        {route.name === "user" && <UserPage route={route}/>}
        {route.name === false && <div>Not Found</div>}
      </React.Suspense>
    </>
  );
}
← Simple React ExampleComplex Route Parameters →
Type Route is a Type Hero project  ·  Copyright © 2020