Enhancing React App Routing with Wouter: Active Links and More
Written on
Chapter 1: Introduction to Wouter
Wouter is an efficient library that allows for the loading of React components based on URL paths. In this guide, we will explore how to implement routing in a React application using Wouter.
To effectively manage routing, we can utilize the isActive variable returned by the useRoute hook to determine which link is currently active.
Section 1.1: Setting Active Links
To specify the active link, you can use the isActive variable provided by the useRoute hook. Below is an example of how this can be implemented:
import React from "react";
import { Link, Route, Router, useRoute } from "wouter";
const InboxPage = () => {
return <div>inbox</div>;
};
const UserPage = () => {
const [, params] = useRoute("/users/:name");
return <div>Hello, {params.name}!</div>;
};
const ActiveLink = (props) => {
const [isActive] = useRoute(props.href);
return (
<Link href={props.href} style={{ color: isActive ? 'blue' : 'black' }}>
{props.children}</Link>
);
};
export default function App() {
return (
<div>
<ActiveLink href="/users">Users</ActiveLink>
<ActiveLink href="/about">About</ActiveLink>
<Route path="/about">
<div>About Us</div></Route>
</div>
);
}
In this example, the ActiveLink component utilizes the useRoute hook to determine if the current URL matches the given path. If it does, the isActive variable will be true, indicating that the link is currently active.
Section 1.2: Handling Trailing Slashes
Wouter can also be configured to match routes that include a trailing slash by using a custom URL matcher. Here’s how you can achieve this:
import React from "react";
import { Route, Router } from "wouter";
import makeMatcher from "wouter/matcher";
import { pathToRegexp } from "path-to-regexp";
const customMatcher = makeMatcher((path) => {
let keys = [];
const regexp = pathToRegexp(path, keys, { strict: true });
return { keys, regexp };
});
export default function App() {
return (
<Router matcher={customMatcher}>
<Route path="/foo">foo</Route>
<Route path="/foo/">/foo/</Route>
</Router>
);
}
In this code snippet, we define a custom matcher that distinguishes between paths with and without trailing slashes, making sure they are treated as separate routes.
Chapter 2: Implementing Nested Paths
We can also create nested paths in Wouter by setting a base path for the routes. Below is an illustration of how to implement nested routes:
import React from "react";
import { Link, Route, Router, useLocation, useRouter } from "wouter";
const NestedRoutes = (props) => {
const router = useRouter();
const [parentLocation] = useLocation();
const nestedBase = ${router.base}${props.base};
if (!parentLocation.startsWith(nestedBase)) return null;
return <div>{props.children}</div>;
};
export default function App() {
return (
<Router>
<Route path="/about">
<NestedRoutes base="/users">
<div>users</div></NestedRoutes>
</Route>
</Router>
);
}
In this example, we create a NestedRoutes component that takes a base prop to define the base path. The nestedBase variable combines the router's base with the provided base path to form the correct routing structure.
Conclusion
Using Wouter, you can effectively manage active links, enforce trailing slash rules, and implement nested paths within your React application. For more in-depth information, visit plainenglish.io.