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

Styling of Links for the Currently Active Route

The same strategy you use to conditionally apply a CSS class to an element dependent on state will also be suitable for changing the styling of a link if it matches the current route. Type Route provides no specific API for this. Typically links in the navigation header of your application will have certain styling applied to them when they match the current route. For example:

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

function Navigation({ route }: Props) {
  return <nav>
    <a {...routes.home().link} className={route.name === "home" ? "active" : undefined}>Home</a>
    <a {...routes.other().link} className={route.name === "other" ? "active" : undefined}>Other</a>
  </nav>
}

A light abstraction on top of this may look something like the following:

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

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

  return <a
    {...to.link}
    className={to.name === route.name ? "active" : undefined}
  >
    {children}
  </a>;
}

function Navigation() {
  return <nav>
    <Link to={routes.home()}>Home</Link>
    <Link to={routes.other()}>Other</Link>
  </nav>
}

Related pages:

  • Rendering Links
  • Custom Link Behavior
  • preventDefaultLinkClickBehavior
← Server Side RenderingType Route without React →
Type Route is a Type Hero project  ·  Copyright © 2020