Installation Guide

To get started with Wouter, the first step is to install it via npm. You can do this by executing the following command:

npm i wouter

Getting Started with Routes

To incorporate routes into your React application, you will utilize the Route component. Here’s a simple example to illustrate this:

import React from "react";

import { Link, Route } from "wouter";

const InboxPage = () => <div>inbox</div>;

export default function App() {

return (

<div>

<Link to="/profile">Profile</Link>

<Link to="/about">About Us</Link>

<Route path="/:name" component={(params) => <div>Hello, {params.name}!</div>} />

</div>

);

}

In this example, the Router component is added to help map routes to their corresponding React components. The :name parameter in the URL can be accessed through params.name. The Link component is used to create navigable links.

Using the useRoute Hook

The useRoute hook allows you to extract URL parameters from a route. For example:

import React from "react";

import { Transition } from "react-transition-group";

import { useRoute } from "wouter";

export default function App() {

const [match, params] = useRoute("/users/:id");

return <div>Hi, this is: {params.id}</div>;

}

This snippet demonstrates how to parse the route URL using the useRoute hook, enabling you to access the URL parameters easily. The Transition component can also be utilized to add animations when loading new routes.

Using the useLocation Hook

The useLocation hook provides access to the current location object, allowing navigation to different routes. For example:

import React from "react";

import { Link, Route, useLocation } from "wouter";

const InboxPage = () => {

const [location, setLocation] = useLocation();

return (

<div>

{The current page is: ${location}}

<button onClick={() => setLocation("/about")}>Click to update</button>

</div>

);

};

export default function App() {

return (

<div>

<Link to="/inbox">Inbox</Link>

<Link to="/about">About Us</Link>

<Route path="/:name" component={(params) => <div>Hello, {params.name}!</div>} />

</div>

);

}

In this example, the setLocation function from the useLocation hook is employed to navigate to the about route when the button is clicked.

Customizing the useLocation Hook

You can tailor the useLocation hook to suit your needs, such as extracting URL segments from the hash rather than from URL parameters. Here’s how to implement it:

import React, { useCallback, useEffect, useState } from "react";

import { Link, Route, Router, useLocation } from "wouter";

const currentLocation = () => {

return window.location.hash.replace(/^#/, "") || "/";

};

const useHashLocation = () => {

const [loc, setLoc] = useState(currentLocation());

useEffect(() => {

const handler = () => setLoc(currentLocation());

window.addEventListener("hashchange", handler);

return () => window.removeEventListener("hashchange", handler);

}, []);

const navigate = useCallback((to) => (window.location.hash = to), []);

return [loc, navigate];

};

const InboxPage = () => {

const [location] = useLocation();

return <div>{The current page is: ${location}}</div>;

};

export default function App() {

return (

<div>

<Link to="/inbox">Inbox</Link>

<Link to="/about">About Us</Link>

<Route path="/:name" component={(params) => <div>Hello, {params.name}!</div>} />

</div>

);

}

In this code, the currentLocation function retrieves the portion of the URL following the hash. The useHashLocation hook monitors changes to the hash, allowing navigation based on that segment.

Conclusion

Wouter stands out as a lightweight router tailored for React applications, offering an efficient way to manage routing and enhance user experience.