# Trouty

A type-safe router for react, built on top of react router.

React routers primary feature is nested routes, but the trade-off is lots of string templating urls and manual processing of the query string.

I built Trouty to provide some type safety to route transitions, and give a consistent interface for dealing with the querystring/hash/params String templating routes is fraught with danger, and mixing params and query parameters is a pain. Trouty was designed so you never have to deal with the route as a string.

// UserRoutes.ts
import {Route, Parse, Link} from 'trouty';

// UserItem wants a string id from params
export const UserItem = Route<{id: string}>({
    path: '/user/:id',
    parse: {
        id: Parse.param.string
    },
    component: (props) => {
        const routes = useRoutes();
        return <div>
            <h1>User: {props.args.id}</h1>
            <Link to={routes.UserList.to({search: '', page: 1})}>Back to list</Link>
        </div>
    }
});

// UserList wants two values from the query string: a search string, and a page number.
export const UserList = Route<{search: string, page: number}>({
    path: '/user/:id',
    parse: {
        search: Parse.query.string,
        page: Parse.query.number
    },
    component: (props) => {
        const routes = useRoutes();
        // Maybe here we use props.args.search for filtering a list of users
        return <div>
            <h1>User List</h1>
            <Link to={routes.UserItem.to({id: 'foo'})}>Go to foo user</Link>
        </div>
    }
});