feat: support underscore in path parts

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.0.0] - UNRELEASED
+### Changed
+- Added support for underscore `_` in path part matchers
+
 ## [4.1.2] - 2022-11-02
 ### Fixed
 - `useHash` undefined error from missing prop on event

docs/api/useRoutes.md

@@ -24,7 +24,7 @@ function useRoutes(
 
 ## Basic
 
-The first parameter is an object of path keys whose values are functions that return a **ReactElement** (or null when no match is found). The paths should start with a forward-slash `/` and then contain literal matches (`/base`), path variables (`/:userId`), and a `*` for catch-all wildcards. Path variables will be provided to the matching route-function.
+The first parameter is an object of path keys whose values are functions that return a **ReactElement** (or null when no match is found). The paths should start with a forward-slash `/` and then contain literal matches (`/base`), path variables (`/:userId`, in the format `: + [a-zA-Z_]+`), and a `*` for catch-all wildcards. Path variables will be provided to the matching route-function.
 
 ```jsx
 import { useRoutes, Link } from 'raviger'

src/router.tsx

@@ -197,16 +197,18 @@ function getMatchParams(
   return [routeMatch, props]
 }
 
+const pathPartRegex = /:[a-zA-Z_]+/g
+
 function createRouteMatcher(path: string): RouteMatcher {
   return {
     path,
     regex: new RegExp(
       `${path.substr(0, 1) === '*' ? '' : '^'}${escapeRegExp(path)
-        .replace(/:[a-zA-Z]+/g, '([^/]+)')
+        .replace(pathPartRegex, '([^/]+)')
         .replace(/\*/g, '')}${path.substr(-1) === '*' ? '' : '$'}`,
       'i',
     ),
-    props: (path.match(/:[a-zA-Z]+/g) ?? []).map((paramName) => paramName.substr(1)),
+    props: (path.match(pathPartRegex) ?? []).map((paramName) => paramName.substr(1)),
   }
 }
 

test/router.spec.tsx

@@ -42,6 +42,7 @@ describe('useRoutes', () => {
     '/': () => <Route label="home" />,
     '/about': ({ extra }: { extra?: string }) => <Route label="about" extra={extra} />,
     '/users/:userId': ({ userId }) => <Route label={`User ${userId}`} />,
+    '/people/:person_id': ({ person_id }) => <Route label={`Person ${person_id}`} />,
     '/weird (route)': () => <Route label="weird1" />,
     '/weird (route+2)': () => <Route label="weird2" />,
   }
@@ -110,6 +111,13 @@ describe('useRoutes', () => {
     expect(getByTestId('label')).toHaveTextContent('User 1')
   })
 
+  test('matches route with underscored parameters', async () => {
+    const { getByTestId } = render(<Harness routes={routes} />)
+
+    act(() => navigate('/people/1'))
+    expect(getByTestId('label')).toHaveTextContent('Person 1')
+  })
+
   test('matches case insensitive rout', async () => {
     const { getByTestId } = render(<Harness routes={routes} />)