Package Exports

wouter

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (wouter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

wouter 👩‍✈️

A tiny routing solution for modern React apps that relies on Hooks. Perfect for small and hackathon projects.

Mimics react-router's best practices, although the library is not a drop-in replacement.
A top-level Router component is fully optional!
Out of the box only supports History API, customization is possible via a Router component.
Small, 3KB gzipped (vs 17KB react-router) with plans to get it down to 1KB (this is currently work in progress, your help is welcome!).

How to get started?

Check out this demo app below in order to get started:

import { Link, Route } from "wouter";

const App = () => (
  <div>
    <nav>
      <Link href="/inbox">Inbox</Link>
      <Link href="/settings">
        {/* a link element can be customized */}
        <a className="link-red">Settings</a>
      </Link>
    </nav>

    <main>
      <Route path="/users/:id">
        {params => <div>User ID: {params.id}</div>}
      </Route>
      
      {/* React-Router's way of describing routes */}
      <Route path="/inbox" component={InboxPage} />
      
      <Route path="/settings">Settings Page</Route>
    </main>
  </div>
);

The power of HOOKS!

wouter relies heavily on React Hooks. Thus it makes creating cutom interactions such as route transitions or accessing router directly easier. You can check if a particular route matches the current location by using a useRoute hook:

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

const AnimatedRoute = () => {
  // `match` is boolean
  const [match, params] = useRoute("/users/:id");

  return (
    <Transition in={match}>
      This is user ID: {params.id}
    </Transition>
  )
};

Working with History

By default wouter creates an internal History object that observes the changes of the current location. If you need a custom history observer, for example for hash-based routing you can implement your own history.

import { Router, Route,  useRouter } from "wouter"

const App => (
  <Router history={myHashHistory}>
    <Route path="/about" component={About} />
    ...
  </Router>
)

// you can later access the history object through the router object
const Foo = () => {
  const router = useRouter()

  // manually changes the location
  return <div onClick={() => router.history.push("/orders")}>My Orders</div>
}

Your feedback is welcome!

Please feel free to participate in development of the library.