Preact - preact-router default routing when path is incorrect

In this short article, we would like to show how to add default preact routing when there is not available any matching path.

Quick solution:

<Router>
    <Page1Component path="/page-1" />
    <Page2Component path="/page-2" />
    <Page3Component path="/page-3" />
    {/* ... */}
    <DefaultComponent default={true} />
</Router>

Practical example

In this section, you can find default routing that displays error component when desired path is not available.

import { h } from 'preact';
import { Router } from 'preact-router';

import Home from '../../routes/home';
import Users from '../../routes/users';
import Gallery from '../../routes/gallery';
import About from '../../routes/about';
import Error from '../../routes/error';

import style from './app.scss';

const App = () => {
	return (
		<div id="app" class={style.app}>
			<Router>
				<Home path="/" />
				<Users path="/users" />
				<Gallery path="/gallery" />
				<About path="/about" />
				<Error default={true} />
			</Router>
		</div>
	);
};

export default App;

Where: <Error /> component will be used when path is not matched to any above paths.

References

1. Handling URLS with preact-router - GitHub