![\"type-route\"/](\"./artwork/type-route.svg\")
\n \n ![\"type-route\"/](\"https://www.type-route.org/img/logo.svg\"){kind=logo}
\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n ![\"type-route\"/](\"https://www.type-route.org/img/type-route-logo.svg\"){kind=logo}
\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n ![\"type-route\"/](\"https://www.typehero.org/type-route/img/type-route-logo.svg\"){kind=logo}
\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\nType Route\n
\n\n## Getting Started\n\n[Type Route](https://typehero.org/type-route) is a flexible, type safe routing library built on top of the same [core library](https://github.com/ReactTraining/history) that powers React Router.\n\n> Type Route was designed with excellent React integration in mind but isn't coupled to a specific UI framework. Most code examples in the documentation use React, but the general principles covered apply regardless of framework.\n\nContinue reading this introduction for a quick overview of how to start using Type Route in your project. Find a full runnable version of the below examples on the [Simple React Example](../guides/simple-react-example.md) page.\n\n## Install\n\nType Route's primary distribution channel is the [NPM registry](https://www.npmjs.com/package/type-route).\n\n```bash\nnpm install type-route\n```\n\n## Step 1: Create a Router\n\n`router.ts`\n\n```typescript\nimport { createRouter, defineRoute, param } from \"type-route\";\n\nexport const { routes, listen, session } = createRouter({\n home: defineRoute(\"/\"),\n userList: defineRoute(\n {\n page: param.query.optional.number\n },\n () => \"/user\"\n ),\n user: defineRoute(\n {\n userId: param.path.string\n },\n p => `/user/${p.userId}`\n )\n});\n```\n\nBest practice is to immediately destructure the result of [`createRouter`](../api-reference/router/create-router.md) into the properties you'll be using in your application. The [`createRouter`](../api-reference/router/create-router.md) function accepts an object with route names and route definitions created via [`defineRoute`](../api-reference/route-definition/define-route.md) and returns a new router.\n\n## Step 2: Connect to Application State\n\n`App.tsx`\n\n```tsx\nimport React, { useState, useEffect } from \"react\";\nimport { listen, session } from \"./router\";\nimport { Page } from \"./Page\";\nimport { Navigation } from \"./Navigation\";\n\nfunction App() {\n const [route, setRoute] = useState(session.getInitialRoute());\n\n useEffect(() => listen(nextRoute => setRoute(nextRoute)), []);\n\n return (\n <>\n\n \n \n \n
\nType Route\n
\n\n## Getting Started\n\n[Type Route](https://typehero.org/type-route) is a flexible, type safe routing library built on top of the same [core library](https://github.com/ReactTraining/history) that powers React Router.\n\n> Type Route was designed with excellent React integration in mind but isn't coupled to a specific UI framework. Most code examples in the documentation use React, but the general principles covered apply regardless of framework.\n\nContinue reading this introduction for a quick overview of how to start using Type Route in your project. Find a full runnable version of the below examples on the [Simple React Example](../guides/simple-react-example.md) page.\n\n## Install\n\nType Route's primary distribution channel is the [NPM registry](https://www.npmjs.com/package/type-route).\n\n```bash\nnpm install type-route\n```\n\n## Step 1: Create a Router\n\n`router.ts`\n\n```typescript\nimport { createRouter, defineRoute, param } from \"type-route\";\n\nexport const { routes, listen, session } = createRouter({\n home: defineRoute(\"/\"),\n userList: defineRoute(\n {\n page: param.query.optional.number\n },\n () => \"/user\"\n ),\n user: defineRoute(\n {\n userId: param.path.string\n },\n p => `/user/${p.userId}`\n )\n});\n```\n\nBest practice is to immediately destructure the result of [`createRouter`](../api-reference/router/create-router.md) into the properties you'll be using in your application. The [`createRouter`](../api-reference/router/create-router.md) function accepts an object with route names and route definitions created via [`defineRoute`](../api-reference/route-definition/define-route.md) and returns a new router.\n\n## Step 2: Connect to Application State\n\n`App.tsx`\n\n```tsx\nimport React, { useState, useEffect } from \"react\";\nimport { listen, session } from \"./router\";\nimport { Page } from \"./Page\";\nimport { Navigation } from \"./Navigation\";\n\nfunction App() {\n const [route, setRoute] = useState(session.getInitialRoute());\n\n useEffect(() => listen(nextRoute => setRoute(nextRoute)), []);\n\n return (\n <>\n\n \n \n \n
\n
\n \n \n \n
\nType Route is a Type Hero Project ยท Documentation\n
\n\n## Getting Started\n\n[Type Route](https://typehero.org/type-route) is a flexible, type safe routing library built on top of the same [core library](https://github.com/ReactTraining/history) that powers React Router.\n\n> Type Route was designed with excellent React integration in mind but isn't coupled to a specific UI framework. Most code examples in the documentation use React, but the general principles covered apply regardless of framework.\n\nContinue reading this introduction for a quick overview of how to start using Type Route in your project. Find a full runnable version of the below examples on the [Simple React Example](../guides/simple-react-example.md) page.\n\n## Install\n\nType Route's primary distribution channel is the [NPM registry](https://www.npmjs.com/package/type-route).\n\n```bash\nnpm install type-route\n```\n\n## Step 1: Create a Router\n\n`router.ts`\n\n```typescript\nimport { createRouter, defineRoute, param } from \"type-route\";\n\nexport const { routes, listen, session } = createRouter({\n home: defineRoute(\"/\"),\n userList: defineRoute(\n {\n page: param.query.optional.number\n },\n () => \"/user\"\n ),\n user: defineRoute(\n {\n userId: param.path.string\n },\n p => `/user/${p.userId}`\n )\n});\n```\n\nBest practice is to immediately destructure the result of [`createRouter`](../api-reference/router/create-router.md) into the properties you'll be using in your application. The [`createRouter`](../api-reference/router/create-router.md) function accepts an object with route names and route definitions created via [`defineRoute`](../api-reference/route-definition/define-route.md) and returns a new router.\n\n## Step 2: Connect to Application State\n\n`App.tsx`\n\n```tsx\nimport React, { useState, useEffect } from \"react\";\nimport { listen, session } from \"./router\";\nimport { Page } from \"./Page\";\nimport { Navigation } from \"./Navigation\";\n\nfunction App() {\n const [route, setRoute] = useState(session.getInitialRoute());\n\n useEffect(() => listen(nextRoute => setRoute(nextRoute)), []);\n\n return (\n <>\n\n \n \n \n
\nType Route is a Type Hero Project ยท Quick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero Project ยท Quick Start ยท Documentation\n
\n\n \n \n \n
\nQuick Start ยท Docs ยท Introductory Blog Post\n
\nType Route is a Type Hero Project\n
\n \n \n \n
\nQuick Start ยท Docs ยท Introductory Blog Post\n
\n\n \n \n \n
\nQuick Start ยท Docs ยท Introductory Blog Post\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n ![\"Type](\"https://typehero.org/type-route/img/type-route-logo.svg\"){kind=logo}
\n \n
\nQuick Start ยท Docs\n
\n\n \n ![\"Type](\"https://typehero.org/type-route/img/type-hero-logo.svg\"){kind=logo}
\n \n
\nType Route is a Type Hero project.\nQuick Start ยท Docs\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
","readmeFilename":"README.md","_id":"type-route@0.0.0-582c4d8670c5e02e781572143da0cddb3960662b","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-OXDCmnA+bkIaB0rlU8pz+U3ywACOETvxoCX/8sux1t9rl8Z0l6NIEmddjM6Tq/CzNVNGWU2YBF2nogoMSDNiUQ==","shasum":"fd5c3d1eb8d9169713e5adf833eeceffe9bed9a1","tarball":"https://registry.npmjs.org/type-route/-/type-route-0.0.0-582c4d8670c5e02e781572143da0cddb3960662b.tgz","fileCount":46,"unpackedSize":564543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+1MCRA9TVsSAnZWagAATiQP/jt82Ebfx1zK06eiIHr0\nfLuUrToaUkzP0b/bGG1toYqn4L2tBbc78i9mG6A1t+SCv1LVWP/yyh6eV9lq\nSLRisrVXgNqTPBaim78PwhMfS78I2A11qlZXcGW/qUdWhPN2osoZrvakfKpQ\nJst8mxsoA9O/ABgY8Rj+Xf6Z/uUy+WTy9/eazYIh6QRP3wE4+92y0+8MaP26\nh3LQYgs2XGJ0VoZObpHZHgR7qbV3tw7zMim4XvZ6O1JEW1FeBoMevaY9ZHdw\nQitHsx0XcZmpDzREUoDIomWKa1qbgtk9ncV9RDh8LZyVyM786YhPEg5sK/Sg\nrl+dJVAFo4lWzpJUbs+rioCHKcRieS7eKhnS696O+K5rr8mwo5Nh66Ucr2u8\nLr2Ipm1EwCaOkFs5GG9vbbr0U6iPSHdHSA/oJltj5NVtwUj+Fpa+EHx8/KK9\nP4ouBHt0zG2m+idN9Rz/MLnGBZTiBQyLVD5F9r2rFKnPyXhbDptGIVGVhFs4\nB4kuKaYoqDnErNi1HglqqEEGhlvmvmKHjEm3ppv3+GQQsaBF6zvbHyw3p3Qb\nFAHtjCSpE7uwgNRbgsLadUuw+CpIJA0m5mJhy567Nc7rgCpVepMVoeCsatfx\nNOyIfkoSFsKHSAD7YgJiVxpRuL88PMM4FROTlDbnbLweaheydjzGA9ZXWsMC\nNVJK\r\n=K/V+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAGMWC9nqVJosqdGwfxUDvDvPBOSOe2Z/T2FwdwHKF7AiBG1ryaCyE2E6vN4iQQaMqlRkNz9q53RVVYYaZQHUx2uQ=="}]},"maintainers":[{"name":"bradenhs","email":"bradenhs@outlook.com"}],"_npmUser":{"name":"bradenhs","email":"bradenhs@outlook.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/type-route_0.0.0-582c4d8670c5e02e781572143da0cddb3960662b_1591733580011_0.16999815096874316"},"_hasShrinkwrap":false},"0.0.0-f9876a92219144ba305504968012966040cc3ac8":{"name":"type-route","version":"0.0.0-f9876a92219144ba305504968012966040cc3ac8","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/type-route.esm.js","description":"A flexible, type safe routing library","repository":{"type":"git","url":"git+https://github.com/typehero/type-route.git"},"license":"MIT","bugs":{"url":"https://github.com/typehero/type-route/issues"},"sideEffects":false,"homepage":"https://typehero.org/type-route","dependencies":{"history":"^4.10.1"},"authors":["Braden Snell"],"keywords":["react","router","route","routing","history","link","type","types","typescript"],"scripts":{"start":"parcel ./src/playground.html --out-dir parcel-dist","build":"tsdx build --tsconfig ./tsconfig.build.json && rollup -c rollup.dts.config.js && rm dist/*.d.ts && mv dist/index.temp dist/index.d.ts && ls -lhS dist","test":"tsdx test","lint":"eslint --ext ts,tsx ./src ./test --max-warnings=0","prepare":"npm run build"},"devDependencies":{"@types/history":"^4.7.5","@types/jest":"^25.2.1","@types/react":"16.8.8","@types/react-dom":"16.8.2","parcel-bundler":"^1.12.4","prettier":"^2.0.5","react":"^16.8.4","react-dom":"^16.8.4","rollup":"^2.8.2","rollup-plugin-dts":"^1.4.1","ts-toolbelt":"^6.3.11","tsdx":"^0.13.2","tslib":"^1.11.2","typescript":"^3.9.5"},"gitHead":"f9876a92219144ba305504968012966040cc3ac8","readme":"\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\nType Route is a Type Hero project.\n
\n\n \n \n \n
\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\n \n \n \n
\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n \n \n
\nType Route is a Type Hero project.\n
\n\n \n \n \n
\nQuick Start ยท Docs\n
\n\n \n