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

Custom Link Behavior

The standard way to create links in Type Route looks something like this:

<a {...routes.foo({ bar: "abc" }).link}>Foo</a>

This works great for the majority of scenarios. But what if you want to integrate this link with React's useTransition hook when running in concurrent mode or want to log an analytics event when someone clicks on the link? Type Route handles the default case well but also gives you the flexibility to handle these more complex requirements. In order to fullfil these requirements you may want to consider creating a getLink function or Link component specific to your application.

Function

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

function link(to: Route<typeof routes>) {
  return {
    href: to.href,
    onClick: (e: React.MouseEvent) => {
      if (preventDefaultClickBehavior(e)) {
        to.push();
      }
    }
  }
}
<a {...link(routes.foo({ bar: "abc" }))}>Foo</a>

Component

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

type Props = {
  to: Route<typeof routes>
  children?: React.ReactNode;
}

function Link(props: Props) {
  const { to, children } = props;

  return (
    <a
      href={to.href}
      onClick={event => {
        if (preventDefaultLinkClickBehavior(event)) {
          to.push();
        }
      }}
    >
      {children}
    </a>
  )
}
<Link to={routes.foo({ bar: "abc" })}>Foo</Link>

From this starting point you could modify the code to do any number of things tailored to your particular needs.

Related pages:

  • Rendering Links
  • Styling of Links for the Currently Active Route
  • preventDefaultLinkClickBehavior
← Complex Route ParametersCustom Query String →
Type Route is a Type Hero project  ·  Copyright © 2020