How to throw an Error on an unknown route?

I define the content for each route like so:

return (
  <Routes>
    <Route path={'/foo'} element={<Foo />} />
    <Route path={'/bar'} element={<Bar />} />

return (
  <Routes>
    <Route path={'/foo'} element={<Foo />} />
    <Route path={'/bar'} element={<Bar />} />

If there is an unknown route like /baz, no component will be rendered (leading to a blank page in my case). However I would like to throw an Error if that happens. What would be the best way to achieve this?

2 Replies

Unknown User•2y ago

Message Not Public

Mathieu•2y ago

Thanks I added this:

<Route path="*" component={UnknownRouteErrorThrower} />

<Route path="*" component={UnknownRouteErrorThrower} />

import type { VoidComponent } from 'solid-js';
import { useLocation } from '@solidjs/router';

const UnknownRouteErrorThrower: VoidComponent = () => {
  const location = useLocation();
  throw new Error(`unknown route ${location.pathname}`);
};

export default UnknownRouteErrorThrower;

import type { VoidComponent } from 'solid-js';
import { useLocation } from '@solidjs/router';

const UnknownRouteErrorThrower: VoidComponent = () => {
  const location = useLocation();
  throw new Error(`unknown route ${location.pathname}`);
};

export default UnknownRouteErrorThrower;

Gaming

Programming

How to throw an Error on an unknown route?