🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

wouter

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

wouter

Minimalist-friendly ~1.5KB router for React

3.7.1
latest
Version published
Weekly downloads
373K
4.42%
Maintainers
1
Weekly downloads
 
Created

What is wouter?

Wouter is a minimalist routing solution for React applications. It provides a simple and lightweight way to handle client-side routing without the overhead of larger libraries like React Router.

What are wouter's main functionalities?

Basic Routing

This code demonstrates basic routing using Wouter. It sets up two routes, '/' and '/about', and links to navigate between them. The Route component is used to render the appropriate component based on the current path.


import React from 'react';
import { Route, Link } from 'wouter';

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function App() {
  return (
    <div>
      <nav>
        <Link href='/'>Home</Link>
        <Link href='/about'>About</Link>
      </nav>

      <Route path='/' component={Home} />
      <Route path='/about' component={About} />
    </div>
  );
}

export default App;

Custom Hooks for Routing

Wouter provides custom hooks like useLocation to access the current path. This example shows how to display the current location using the useLocation hook.


import React from 'react';
import { useLocation } from 'wouter';

function CurrentLocation() {
  const [location] = useLocation();
  return <p>Current location: {location}</p>;
}

function App() {
  return (
    <div>
      <CurrentLocation />
    </div>
  );
}

export default App;

Parameterized Routes

This example demonstrates parameterized routes in Wouter. The route '/user/:username' captures the username parameter, which is then used in the UserProfile component.


import React from 'react';
import { Route, Link } from 'wouter';

function UserProfile({ params }) {
  return <h2>User Profile: {params.username}</h2>;
}

function App() {
  return (
    <div>
      <nav>
        <Link href='/user/john'>John's Profile</Link>
        <Link href='/user/jane'>Jane's Profile</Link>
      </nav>

      <Route path='/user/:username' component={UserProfile} />
    </div>
  );
}

export default App;

Other packages similar to wouter

FAQs

Package last updated on 27 May 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts