@reach/router

What is @reach/router?

@reach/router is a small, simple, and accessible routing library for React applications. It focuses on providing a straightforward API for handling client-side routing with an emphasis on accessibility and ease of use.

What are @reach/router's main functionalities?

Basic Routing

This code demonstrates basic routing with @reach/router. It sets up two routes, '/' and '/about', and links to them using the Link component.

import React from 'react';
import { Router, Link } from '@reach/router';

const Home = () => <div>Home</div>;
const About = () => <div>About</div>;

const App = () => (
  <div>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
    <Router>
      <Home path="/" />
      <About path="/about" />
    </Router>
  </div>
);

export default App;

Nested Routing

This code demonstrates nested routing with @reach/router. It sets up a parent route '/dashboard' with nested routes '/dashboard/profile' and '/dashboard/settings'.

import React from 'react';
import { Router, Link } from '@reach/router';

const Dashboard = ({ children }) => <div>Dashboard {children}</div>;
const Profile = () => <div>Profile</div>;
const Settings = () => <div>Settings</div>;

const App = () => (
  <div>
    <nav>
      <Link to="/dashboard/profile">Profile</Link>
      <Link to="/dashboard/settings">Settings</Link>
    </nav>
    <Router>
      <Dashboard path="/dashboard">
        <Profile path="profile" />
        <Settings path="settings" />
      </Dashboard>
    </Router>
  </div>
);

export default App;

Dynamic Routing

This code demonstrates dynamic routing with @reach/router. It sets up a route '/user/:userId' where ':userId' is a dynamic segment that can match any user ID.

import React from 'react';
import { Router, Link } from '@reach/router';

const User = ({ userId }) => <div>User ID: {userId}</div>;

const App = () => (
  <div>
    <nav>
      <Link to="/user/1">User 1</Link>
      <Link to="/user/2">User 2</Link>
    </nav>
    <Router>
      <User path="/user/:userId" />
    </Router>
  </div>
);

export default App;

Other packages similar to @reach/router

react-router

React Router is a widely-used routing library for React applications. It offers a more extensive API compared to @reach/router and includes features like nested routes, route guards, and more. It is highly customizable and has a larger community and ecosystem.

wouter

Wouter is a minimalist routing library for React. It is very lightweight and focuses on simplicity and performance. While it lacks some of the advanced features of @reach/router and react-router, it is a good choice for small projects or when performance is a critical concern.

navi

Navi is a routing library for React that emphasizes data-driven routing. It allows you to define routes that can fetch data, handle redirects, and more. Navi is more complex than @reach/router but offers powerful features for handling data fetching and route transitions.

README

Next Generation Routing for React

Documentation

Documentation Site

You can also find the docs in the website directory.

Community

Join us on Spectrum

Legal

MIT License Copyright (c) 2018-present, Ryan Florence

Changelog

v1.3.4

• d7e4cfc Support forwarding url params with wildcard paths