javascript 59 lines · 8 steps

URL-driven tabs with React Router

A tab component that stores the active tab in the URL query string instead of local state, making selections shareable and bookmarkable.

Explained by highlit

React Intermediate url-state query-params accessibility controlled-ui single-source-of-truth

1import { useSearchParams } from "react-router-dom";
2 
3const TABS = [
{ id: "overview", label: "Overview" },
{ id: "activity", label: "Activity" },
{ id: "settings", label: "Settings" },
7];
8 
9const DEFAULT_TAB = TABS[0].id;
10 
11export function ProjectTabs({ children }) {
const [searchParams, setSearchParams] = useSearchParams();
13 
const requested = searchParams.get("tab");
const activeTab = TABS.some((t) => t.id === requested) ? requested : DEFAULT_TAB;
16 
const selectTab = (tabId) => {
  setSearchParams(
    (prev) => {
      const next = new URLSearchParams(prev);
      if (tabId === DEFAULT_TAB) {
        next.delete("tab");
      } else {
        next.set("tab", tabId);
      }
      return next;
    },
    { replace: true }
  );
};
31 
return (
  <div className="project-tabs">
    <div role="tablist" aria-label="Project sections">
      {TABS.map((tab) => (
        <button
          key={tab.id}
          role="tab"
          id={`tab-${tab.id}`}
          aria-selected={tab.id === activeTab}
          aria-controls={`panel-${tab.id}`}
          tabIndex={tab.id === activeTab ? 0 : -1}
          className={tab.id === activeTab ? "tab is-active" : "tab"}
          onClick={() => selectTab(tab.id)}
        >
          {tab.label}
        </button>
      ))}
    </div>
    <div
      role="tabpanel"
      id={`panel-${activeTab}`}
      aria-labelledby={`tab-${activeTab}`}
    >
      {children[activeTab]}
    </div>
  </div>
);
59}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Storing UI state in the URL makes views shareable, bookmarkable, and survivable across reloads.
2Validating the raw query value against a known list guards against arbitrary or stale input.
3Wiring ARIA roles and tabIndex to the derived active tab keeps keyboard and screen-reader behavior correct for free.

Related explainers

javascript

const { Pool } = require('pg');
 
const pool = new Pool({
  connectionString: process.env.DATABASE_URL,

Per-request Postgres connections in Express

connection-pooling middleware transactions

Intermediate 8 steps

javascript

const express = require('express');
const router = express.Router();
const db = require('../db');

Building a paginated orders page in Express

pagination routing sql-queries

Intermediate 7 steps

javascript

import { Suspense } from 'react';
import { searchProducts } from '@/lib/products';
import SearchInput from './search-input';

Streaming search results in a Next.js Server Component

server-components suspense streaming

Intermediate 8 steps

javascript

import { useState } from 'react';
 
function StarRating({ value = 0, max = 5, onChange, size = 24 }) {
  const [hovered, setHovered] = useState(null);

Building an accessible star rating in React

controlled-component accessibility state-management

Intermediate 8 steps

javascript

import { notFound } from 'next/navigation'
import { Suspense } from 'react'
import { getPostBySlug, getRelatedPosts } from '@/lib/posts'
import { RelatedPosts } from '@/components/related-posts'

Building a dynamic blog post page in Next.js

server-components dynamic-routing metadata

Intermediate 8 steps

javascript

const express = require('express');
const { createProxyMiddleware, fixRequestBody } = require('http-proxy-middleware');
 
const router = express.Router();