Router Options for a Single Page App

19 Jan, 2023

Popular options:

• React Router
• Reach Router
• TanStack/router
• DIY router

Less Popular:

• Atomic Router

How to choose?

Criteria:

• ease of use
• documentation
• bundle size
• is maintained?
• popularity

Router features

• params
• browser router instead of memory router
• nested routes
• links

React Router

• most popular
• routes can be configured with an object

TanStack/router

• probably good if you use TanStack/query
• is in beta

Reach Router

• has less features than react-router and tanstack/router
• routes configured only via jsx
• merged into react-router
• Reach Router v2 is React Router v6

DIY Router

Pros:

• simplest
• no dependencies

Cons:

• no address bar path change
• no state preservation

Example from my todo app:

import { useState } from 'react';

enum PAGES {
  HOME,
  SETTINGS
}

export function Router() {
  const [currentPage, setCurrentPage] = useState(PAGES.HOME)

  return (
    <>
      <div>
        <button onClick={() => setCurrentPage(PAGES.HOME)}>home</button>
        <button onClick={() => setCurrentPage(PAGES.SETTINGS)}>settings</button>
      </div>

      {currentPage === PAGES.HOME && 'home page'}
      {currentPage === PAGES.SETTINGS && 'settings page'}
    </>
  );
}

Right now this is sufficient.