Crossroad

A React library to handle navigation in your webapp. Built with simple components and React Hooks.

npm install crossroad

Documentation Donate

import Router, { Switch, Route } from "crossroad";

export default () => (
  <Router>
    <Switch redirect="/">
      <Route path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/users/:id" component={Profile} />
    </Switch>
  </Router>
);

Familiar

Crossroad's high level API is based on React Router with some improvements

Documented

Getting started, API description and many examples for your convenience

Tiny Footprint

At just 1.8kb (min+gzip), the impact on your app loading time is minimal

Stable and tested

With 130+ tests to check everything works. We follow semver strictly

React Hooks

Provide useful hooks to add to your components: usePath(), useQuery()

Intuitive

Try it once and you won't need to read the docs again

Example: Static routes

Let's see a traditional company website, where you have a homepage, some specific pages and a PDF:

Codesandbox Code & docs

Example: Search Query

You can use the search query parameters as the source of state, effectively replacing useState('default') with useQuery('key'), which makes it resistant to reload:

Codesandbox Code & docs

Example: Query Routing

You can also use the search query parameters for routing, which is very useful in some typical cases like if you have tabs:

Codesandbox Code & docs