Preact is a lightweight JavaScript library that provides a fast, efficient, and extensible alternative to React. It is designed to be a drop-in replacement for React, allowing developers to use the same codebase for both libraries. Preact also provides a router, which allows developers to create single-page applications (SPAs) with ease.
In this tutorial, we will learn how to use the Preact router to create a simple SPA. We will cover the following topics:
The first step is to install the Preact router. To do this, we will use the npm package manager. Open a terminal window and run the following command:
npm install preact-routerThis will install the Preact router package and all its dependencies. Once the installation is complete, we can move on to the next step.
The next step is to create a router component. This component will be responsible for handling the routing logic of our application. To create the component, we will use the createRouter function provided by the Preact router package.
The createRouter function takes two arguments: an array of routes and an options object. The routes array is an array of objects that define the routes of our application. Each route object should have a path property, which is a string that defines the URL path of the route, and a component property, which is a React component that will be rendered when the route is matched. The options object is an optional argument that can be used to configure the router.
For example, the following code creates a router component with two routes:
const router = createRouter([ { path: '/', component: HomePage }, { path: '/about', component: AboutPage }]);In this example, the router will render the HomePage component when the URL path is /, and the AboutPage component when the URL path is /about.
Once we have created the router component, we can add routes to it. To add a route, we will use the addRoute function provided by the Preact router package. The addRoute function takes two arguments: a route object and an options object. The route object should have a path property, which is a string that defines the URL path of the route, and a component property, which is a React component that will be rendered when the route is matched. The options object is an optional argument that can be used to configure the route.
For example, the following code adds a route to the router component:
router.addRoute({ path: '/contact', component: ContactPage });In this example, the router will render the ContactPage component when the URL path is /contact.
Once we have added all the routes to the router component, we can render it. To render the router component, we will use the render function provided by the Preact router package. The render function takes two arguments: a React element and a DOM element. The React element is the router component that we created earlier, and the DOM element is the DOM element that the router component will be rendered into.
For example, the following code renders the router component into a DOM element with the ID root:
render(router, document.getElementById('root'));Once the router component has been rendered, we can use it to navigate between the different routes of our application. To do this, we will use the navigate function provided by the Preact router package. The navigate function takes one argument: a URL path. The URL path should be the same as the path property of one of the routes that we added to the router component earlier.
For example, the following code navigates to the /contact route:
router.navigate('/contact');In this example, the router will render the ContactPage component when the URL path is /contact.
In this tutorial, we learned how to use the Preact router to create a simple SPA. We installed the Preact router, created a router component, added routes to the router component, rendered the router component, and used the router component to navigate between the different routes of our application.
If you want to learn more about the Preact router, you can check out the official documentation here.