{"record":{"id":"f8dc11ff7a077d51","repo":"streamich/react-use","slug":"router-route-must-be-a-string","errorCode":null,"errorMessage":"Router route must be a string.","messagePattern":"Router route must be a string\\.","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"src/factory/createRouter.ts","lineNumber":21,"sourceCode":"export interface RouterProviderProps {\n  route: string;\n  fullRoute?: string;\n  parent?: any;\n}\n\nconst createRouter = () => {\n  const context = React.createContext<RouterProviderProps>({\n    route: '',\n  });\n\n  // not sure if this supposed to be unused, ignoring ts error for now\n  // @ts-ignore\n  const Router: React.SFC<RouterProviderProps> = (props) => {\n    const { route, fullRoute, parent, children } = props;\n\n    if (process.env.NODE_ENV !== 'production') {\n      if (typeof route !== 'string') {\n        throw new TypeError('Router route must be a string.');\n      }\n    }\n\n    return React.createElement(context.Provider as any, {\n      value: {\n        fullRoute: fullRoute || route,\n        route,\n        parent,\n      },\n      children,\n    });\n  };\n};\n\nexport default createRouter;\n","sourceCodeStart":3,"sourceCodeEnd":37,"githubUrl":"https://github.com/streamich/react-use/blob/fbe99c6327e6af94df03bc8bd6ecc5e3ff04fbcc/src/factory/createRouter.ts#L3-L37","documentation":"Thrown by the Router component produced by createRouter when its `route` prop is not a string, but only when process.env.NODE_ENV !== 'production' (a dev-only invariant). RouterProviderProps types route as `string`, so in TypeScript this path is normally unreachable; the guard exists for JavaScript consumers or loosely-typed usage that passes a number, undefined, or object as route. Note: the current createRouter source does not actually return/export the Router component (no return statement in createRouter), so reaching this throw also implies the consumer wired it up manually.","triggerScenarios":"Rendering <Router route={someValue}/> where someValue is not a string (e.g. a number, undefined, null, or object) while running outside production mode. Commonly happens when route is computed and can be undefined before data loads, or when a non-string value (like a route object or index) is forwarded into the prop.","commonSituations":"Passing an uninitialized/optional route that resolves to undefined before async data settles; forwarding a numeric id or a parsed location object instead of the path string; JS consumers bypassing the TS `route: string` type; conditional spreads like {...(cond && {route: value})} that omit route entirely (undefined).","solutions":["Ensure the route prop is always a string: <Router route={String(route)}/> or guard with a default <Router route={route ?? ''}/>.","Fix the upstream value so it is a string path before it reaches Router (e.g. resolve the URL/path from your state/routing lib).","If the value can be undefined during loading, defer rendering Router until the route is known, or pass a placeholder empty string.","Confirm you are consuming the component returned by createRouter correctly (the factory must return the Router/Provider; verify exports)."],"exampleFix":"// before\n<Router route={maybeUndefinedRoute}/>\n<Router route={locationObject}/>\n\n// after\n<Router route={route ?? ''}/>\n<Router route={locationObject.pathname}/>","handlingStrategy":"validation","validationCode":"function renderRouter(route: unknown) {\n  if (typeof route !== 'string') {\n    throw new TypeError(`Expected route to be a string, got ${typeof route}`);\n  }\n  return <Router route={route}/>;\n}\n\n// or default before rendering:\nconst safeRoute = typeof route === 'string' ? route : '';\nreturn <Router route={safeRoute}/>;","typeGuard":"const isRouteString = (v: unknown): v is string => typeof v === 'string';\n\nif (isRouteString(route)) {\n  return <Router route={route}/>;\n}\n// handle the non-string case (loading / error)","tryCatchPattern":"// The throw happens during render in dev; catch it with an error boundary\n// while you fix the upstream value.\nclass RouteBoundary extends React.Component<\n  { children: React.ReactNode; fallback: React.ReactNode },\n  { hasError: boolean }\n> {\n  state = { hasError: false };\n  static getDerivedStateFromError() { return { hasError: true }; }\n  componentDidCatch(e: unknown) { console.warn('Router route invalid:', e); }\n  render() { return this.state.hasError ? this.props.fallback : this.props.children; }\n}","preventionTips":["Type route as string at the source and let TypeScript reject non-string values.","Coerce or default optional route values (route ?? '') before passing them in.","Defer rendering Router until the route has resolved to a known string.","Remember this guard is dev-only (NODE_ENV !== 'production'); do not rely on it as a runtime contract in production builds."],"tags":["react","router","props","typescript","dev-only"],"backgroundTag":null,"analyzedSha":"fbe99c6327e6af94df03bc8bd6ecc5e3ff04fbcc","analyzedAt":"2026-08-12T19:24:06.802Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}