Concepts

Catch-all routes

Edit this page

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.

Report an issue with this page