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

Page Layout

Most applications have a layout structure resembling something like the following:

  • Header
  • Page Content (dynamic based on route)
  • Footer

Type Route is flexible enough to let the above pattern be accomplished in a variety of ways. While flexibility is powerful it also helps to have some guidance when figuring out your approach.

Bad Example

import React, { useState, useEffect } from "react";
import { createRouter, defineRoute } from "type-route";

const { routes, useRoute } = createRouter({
  home: defineRoute("/"),
  foo: defineRoute("/foo"),
  bar: defineRoute("/bar"),
});

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

  return (
    <>
      {route.name === "home" && <HomePage/>}
      {route.name === "foo" && <FooPage/>}
      {route.name === "bar" && <BarPage/>}
      {route.name === false && <NotFoundPage/>}
    </>
  );
}

function Header() {
  return <nav>
    <a {...routes.home().link}>Home</a>
    <a {...routes.foo().link}>Foo</a>
    <a {...routes.bar().link}>Bar</a>
  </nav>
}

function Footer() {
  return <footer>
    <div>Footer</div>
  </footer>
}

function HomePage() {
  return <>
    <Header />
    <div>Home Page</div>
    <Footer />
  </>
}

function FooPage() {
  return <>
    <Header />
    <div>Foo Page</div>
    <Footer />
  </>
}

function BarPage() {
  return <>
    <Header />
    <div>Bar Page</div>
    <Footer />
  </>
}

function NotFoundPage() {
  return <>
    <Header />
    <div>Bar Page</div>
    <Footer />
  </>
}

The above example would work but, on every page change, the Header and Footer components would be unmounted and remounted unnecessarily. Consider the following approach instead:

Good Example

import React, { useState, useEffect } from "react";
import { createRouter, defineRoute } from "type-route";

const { routes, useRoute } = createRouter({
  home: defineRoute("/"),
  foo: defineRoute("/foo"),
  bar: defineRoute("/bar"),
});

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

  return <>
    <Header />
    {route.name === "home" && <HomePage/>}
    {route.name === "foo" && <FooPage/>}
    {route.name === "bar" && <BarPage/>}
    {route.name === false && <NotFoundPage/>}
    <Footer />
  </>;
}

function Header() {
  return <nav>
    <a {...routes.home().link}>Home</a>
    <a {...routes.foo().link}>Foo</a>
    <a {...routes.bar().link}>Bar</a>
  </nav>
}

function Footer() {
  return <footer>
    <div>Footer</div>
  </footer>
}

function HomePage() {
  return <div>Home Page</div>
}

function FooPage() {
  return <div>Foo Page</div>
}

function BarPage() {
  return <div>Bar Page</div>
}

function NotFoundPage() {
  return <div>Bar Page</div>
}

This good example ensures that the Header and Footer components are not unmounted then remounted unnecessarily.

← No Match (404)Preventing Navigation →
Type Route is a Type Hero project  ·  Copyright © 2020