Fix using screen names in Link (#8473)

* use our router in favour of useLinkBuilder

* test feature using Home header feeds button

* handle non-string params properly

src/lib/routes/router.ts

@@ -1,4 +1,4 @@
-import {Route, RouteParams} from './types'
+import {type Route, type RouteParams} from './types'
 
 export class Router {
   routes: [string, Route][] = []
@@ -45,7 +45,7 @@ function createRoute(pattern: string): Route {
   })
   const matcherRe = new RegExp(`^${matcherReInternal}([?]|$)`, 'i')
   return {
-    match(path: string) {
+    match(path) {
       const {pathname, searchParams} = new URL(path, 'http://throwaway.com')
       const addedParams = Object.fromEntries(searchParams.entries())
 
@@ -55,10 +55,10 @@ function createRoute(pattern: string): Route {
       }
       return undefined
     },
-    build(params: Record<string, string>) {
+    build(params = {}) {
       const str = pattern.replace(
         /:([\w]+)/g,
-        (_m, name) => params[name] || 'undefined',
+        (_m, name) => params[encodeURIComponent(name)] || 'undefined',
       )
 
       let hasQp = false

src/lib/routes/types.ts

@@ -143,5 +143,5 @@ export type RouteParams = Record<string, string>
 export type MatchResult = {params: RouteParams}
 export type Route = {
   match: (path: string) => MatchResult | undefined
-  build: (params: RouteParams) => string
+  build: (params?: Record<string, any>) => string
 }