JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script src="https://enthusiastic-lunch.surge.sh/teki.min.js"></script>
</head>

</html>

JavaScript

const { parse, reverse } = teki

const userRoute =
      parse('/user/:id/messages?page=:page')

console.log(
  userRoute('http://www.example.com/user/123/messages?page=1')
)

const reverseUserRoute =
  reverse(`/user/:id/messages?page=:page`)

console.log(reverseUserRoute({ id: 456, page: 9 }))
// '/user/456?page=9'

const queryRoute =
  parse('/myRoute?foo=:foo&bar=:bar')

console.log(queryRoute('http://localhost/myRoute?bar=hello&foo=world'))
// { bar: 'hello', foo: 'world' }

const optionalQuery =
  parse('/myRoute?foo?=:foo&bar?=:bar')

console.log(optionalQuery('http://localhost/myRoute'))
// { foo: null, bar: null }

console.log(optionalQuery('http://localhost/myRoute?foo=test'))
// { foo: 'test', bar: null }

const listQuery =
  parse('/myRoute?id*=:ids')

console.log(listQuery('http://localhost/myRoute'))
// { ids: [] }

console.log(listQuery('http://localhost/myRoute?id=1&id=2&id=3'))
// { ids: ['1', '2', '3'] }


const hashParam =
  parse('/myRoute#:section')

console.log(hashParam('http://localhost/myRoute#test'))
// { section: test }


const userRouteNumeric =
  parse(`/user/:id<\\d+>`)
  
console.log(userRouteNumeric('http://localhost/user/foo'))
// null

console.log(userRouteNumeric('http://localhost/user/123'))
// { id: '123' }