Catch-all routes

Catch-all routes are used to match any URL that does not match any other route in the application. This is useful for displaying a 404 page or redirecting to a specific route when a user enters an invalid URL.

To create a catch-all route, place a route with a asteriks * as the path at the end of the route list. Optionally, you can name the parameter to access the unmatched part of the URL.

import { Router, Route } from "solid-router";

import Home from "./Home";
import About from "./About";
import NotFound from "./NotFound";

const App = () => (
  <Router>
    <Route path="/home" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="*404" element={<NotFound />} />
  </Router>
);

Now, if a user navigates to a URL that does not match /home or /about, the NotFound component will be rendered.