React Router Active Link
// react router v6 active route
import * as React from "react";
import {
Routes,
Route,
Outlet,
Link,
useMatch,
useResolvedPath,
} from "react-router-dom";
import type { LinkProps } from "react-router-dom";
export default function App() {
return (
<div>
<h1>Custom Link Example</h1>
<p>
This example demonstrates how to create a custom{" "}
<code><Link></code> component that knows whether or not it is
"active" using the low-level <code>useResolvedPath()</code> and
<code>useMatch()</code> hooks.
</p>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="*" element={<NoMatch />} />
</Route>
</Routes>
</div>
);
}
function CustomLink({ children, to, ...props }: LinkProps) {
let resolved = useResolvedPath(to);
let match = useMatch({ path: resolved.pathname, end: true });
return (
<div>
<Link
style={{ textDecoration: match ? "underline" : "none" }}
to={to}
{...props}
>
{children}
</Link>
{match && " (active)"}
</div>
);
}
function Layout() {
return (
<div>
<nav>
<ul>
<li>
<CustomLink to="/">Home</CustomLink>
</li>
<li>
<CustomLink to="/about">About</CustomLink>
</li>
</ul>
</nav>
<hr />
<Outlet />
</div>
);
}
function Home() {
return (
<div>
<h1>Home</h1>
</div>
);
}
function About() {
return (
<div>
<h1>About</h1>
</div>
);
}
function NoMatch() {
return (
<div>
<h1>Nothing to see here!</h1>
<p>
<Link to="/">Go to the home page</Link>
</p>
</div>
);
}
@iinaamasum
