How to Use Wildcard Route in Express: Syntax and Examples

In Express, you use a wildcard route by defining a route path with * to match any path not handled by previous routes. For example, app.get('*', (req, res) => { ... }) catches all unmatched GET requests, often used for 404 pages or fallback handlers.

Syntax

The wildcard route in Express uses the * character in the route path to match any route that hasn't been matched earlier. It is usually placed at the end of your route definitions to act as a catch-all.

Example parts:

• app.get('*', handler): Matches all GET requests.
• app.use('*', handler): Matches all HTTP methods.
• handler: A function with req and res parameters to handle the request.

javascript

app.get('*', (req, res) => {
  res.send('This is a wildcard route');
});

Example

This example shows a simple Express app with a wildcard route that catches all unmatched GET requests and returns a 404 message.

javascript

import express from 'express';
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Home page');
});

// Wildcard route to catch all other GET requests
app.get('*', (req, res) => {
  res.status(404).send('404 Not Found - Wildcard route');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Output

Server running at http://localhost:3000

When visiting http://localhost:3000/ => "Home page"
When visiting http://localhost:3000/anything => "404 Not Found - Wildcard route"

Common Pitfalls

Common mistakes when using wildcard routes include:

• Placing the wildcard route before other specific routes, causing it to catch all requests and block other routes.
• Using app.use('*', ...) without understanding it matches all HTTP methods, which might not be intended.
• Not setting the correct HTTP status code (like 404) in the wildcard handler.

Always place wildcard routes last and set proper status codes.

javascript

import express from 'express';
const app = express();
const port = 3000;

// Wrong: wildcard route placed before specific route
app.get('*', (req, res) => {
  res.send('This catches everything');
});

app.get('/', (req, res) => {
  res.send('Home page');
});

// Correct: specific route first, wildcard last
// app.get('/', (req, res) => {
//   res.send('Home page');
// });
// app.get('*', (req, res) => {
//   res.status(404).send('404 Not Found');
// });

app.listen(port);

Quick Reference

• Wildcard symbol: *
• Use at end: Always place wildcard routes after all specific routes.
• HTTP methods: Use app.get('*', ...) for GET only or app.use('*', ...) for all methods.
• Status codes: Set appropriate status like 404 for not found.

Key Takeaways

Use * in route path to create a wildcard route that matches all unmatched paths.

Place wildcard routes last to avoid blocking other specific routes.

Set proper HTTP status codes like 404 in wildcard route handlers.

Use app.get('*', ...) for GET requests or app.use('*', ...) for all methods.

Wildcard routes are useful for 404 pages or fallback handlers.