React Router — route, nested layout, loader আর URL state

১ · ঠিকানা বদলায়, পাতা নতুন করে আসে না

“বাজারঘর”-এর এখন পর্যন্ত একটিই পাতা। কিন্তু একটি দোকানে হোম, পণ্যের তালিকা, একটি পণ্যের বিস্তারিত, ঝুড়ি আর অ্যাকাউন্ট লাগে। প্রতিটির নিজের ঠিকানা (URL) থাকা চাই, যাতে রিনা তাঁর বোনকে WhatsApp-এ একটি পণ্যের link পাঠাতে পারেন, আর Back বোতাম ঠিক আগের জায়গায় ফেরায়।

পর্ব ০৩-এ আপনি SPA দেখেছেন: server একটিই HTML পাঠায়, বাকি পর্দা JavaScript আঁকে। তাহলে একটি পাতার ভেতরেই অনেক ঠিকানা কীভাবে সম্ভব? উত্তরটি History API. Browser JavaScript-কে অনুমতি দেয়: server-এ না গিয়েই address bar-এর লেখা বদলানো যাবে, ইতিহাসে একটি ঘরও যোগ হবে।

তিনটি ছোট API দিয়েই পুরো ব্যবস্থা চলে। DOM আর event-এর ভিত্তি JavaScript কোর্সে আছে, এখানে শুধু এটুকু দরকার:

এবার সত্যিকারের একটি ক্লিক ধাপে ধাপে দেখুন। সংখ্যাগুলো “বাজারঘর”-এর build থেকে Edge browser-এ Playwright দিয়ে নেওয়া (React Router 8.5.1, Data mode).

location.pathname = "/"
history.state     = {"idx":0}
history.length    = 2
document request  = 1

event.preventDefault()   // browser আর /products চাইবে না
router.navigate("/products")

location.pathname = "/"
#pending দেখাচ্ছে = হ্যাঁ
h1                = বাজারঘর-এ স্বাগতম

location.pathname = "/products"
history.state     = {"usr":null,"key":"tfx56etj","idx":1}
history.length    = 3

h1                = পণ্য
document request  = 1   // শুরুর পর আর বাড়েনি
window.__mark     = same page

২ · React Router-এর এখনকার রূপ: তিনটি mode

React নিজে route দেখে না। এই কাজটি করে আলাদা library, আর সবচেয়ে প্রচলিত নামটি React Router. লেখার সময়ে (নভেম্বর ২০২৬) npm-এ latest হলো 8.5.1. একই library তিনভাবে ব্যবহার করা যায়, আর প্রতিটি mode আগেরটির ওপর বাড়তি সুবিধা যোগ করে।

এই পর্বে আমরা Data mode শিখব, কারণ এটি shared hosting-এর static SPA-তেও চলে, আর loader-এর ধারণা পরিষ্কার দেখায়। Declarative mode অল্প কথায় আগে দেখে নেব। Framework mode-এর SSR-এর ভাবনা আপনি পর্ব ৫১-এ Next.js দিয়ে শিখবেন।

একটি সত্যিকারের project বানাই। Vite project-এর গঠন পর্ব ০৫-এ দেখেছেন।

npm create vite@latest bazarghar-routes -- --template react-ts
cd bazarghar-routes
npm install
npm install react-router

$ npm ls react react-router vite
+-- react-router@8.5.1
+-- react@19.3.1
`-- vite@8.3.5

৩ · Route মেলানো: Routes, Link, NavLink, params আর navigate

প্রথমে সবচেয়ে সরল রূপ, Declarative mode. একটি route মানে একটি নিয়ম: “এই URL হলে এই component”. :id অংশটি একটি route param, মানে URL-এর ওই টুকরো যা-ই হোক, সেটি id নামে পাওয়া যাবে।

import { BrowserRouter, Link, Outlet, Route, Routes, useParams } from "react-router";

function Shell() {
  return (
    <>
      <nav><Link to="/">হোম</Link> <Link to="/products/7">পণ্য ৭</Link></nav>
      <Outlet />
    </>
  );
}

function Product() {
  const { id } = useParams();
  return <h1>পণ্য নম্বর {id}</h1>;
}

export default function DeclarativeApp() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Shell />}>
          <Route index element={<h1>হোম</h1>} />
          <Route path="products/:id" element={<Product />} />
          <Route path="*" element={<h1>৪০৪</h1>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

সত্যিকারের run (Edge-এ সরাসরি দুটি URL খুলে পাওয়া h1):

/products/7  →  পণ্য নম্বর 7
/nope/x      →  ৪০৪

index route হলো বাবার ঠিক নিজের ঠিকানায় যা দেখাবে। * মানে “বাকি যেকোনো কিছু”, তাই এটিই catch-all route. বাকি চারটি জিনিস রোজ লাগবে:

Link আর navigate-এর পার্থক্য সহজ: ব্যবহারকারী যেটিতে ক্লিক করবেন, সেটি <Link>. Screen reader, Ctrl-ক্লিক, “নতুন tab-এ খুলুন” সবই সেখানে কাজ করে। navigate শুধু কোনো কাজের পরে। <button onClick> দিয়ে পাতা বদলানো accessibility-র পরিচিত ভুল।

Router কীভাবে সেরা route বাছে

/products/new তো /products/:id-এর সাথেও মেলে! তাহলে কে জেতে? v6 থেকে React Router প্রতিটি route-কে নম্বর দেয়, লেখার ক্রম দেখে না। নম্বরের নিয়ম সোর্স কোডে লেখা: টুকরো-প্রতি ১ শুরুতে, স্থির শব্দ ১০, :param ৩, ফাঁকা টুকরো ১, আর * থাকলে ২ কাটা। নিচের ব্লকটি সেই ranking-এর ছোট মডেল।

// শেখার মডেল: React Router-এর route ranking
const paths = ['/', '/products', '/products/new', '/products/:id',
  '/products/:id/reviews', '/products/*', '/*'];

function score(p) {
  const segs = p.split('/');
  let s = segs.length;
  if (segs.includes('*')) s -= 2;
  for (const g of segs) {
    if (g === '*') continue;
    s += g === '' ? 1 : g[0] === ':' ? 3 : 10;
  }
  return s;
}
function fits(pattern, url) {
  const a = pattern.split('/'), b = url.split('/'), params = {};
  for (let i = 0; i < a.length; i++) {
    if (a[i] === '*') { params['*'] = b.slice(i).join('/'); return params; }
    if (i >= b.length) return null;
    if (a[i][0] === ':') params[a[i].slice(1)] = b[i];
    else if (a[i] !== b[i]) return null;
  }
  return a.length === b.length ? params : null;
}
const ranked = [...paths].sort((x, y) => score(y) - score(x));
console.log(ranked.map((p) => p + '=' + score(p)).join('  '));
for (const url of ['/products/new', '/products/7',
  '/products/7/reviews', '/products/7/x', '/about']) {
  const hit = ranked.find((p) => fits(p, url));
  console.log(url, '->', hit, JSON.stringify(fits(hit, url)));
}

/products/:id/reviews=28  /products/new=24  /products/:id=17  /products=13  /products/*=12  /=4  /*=1
/products/new -> /products/new {}
/products/7 -> /products/:id {"id":"7"}
/products/7/reviews -> /products/:id/reviews {"id":"7"}
/products/7/x -> /products/* {"*":"7/x"}
/about -> /* {"*":"about"}

এবার মূল ধারণাটি হাতে পরখ করুন। এটি শেখার মডেল, আসল React Router নয়, কারণ live block-এ বাইরের package আসে না। Location এখানে একটি সাধারণ variable, আর পুরো router প্রায় ২৫ লাইনের।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
// শেখার মডেল, আসল React Router নয়: location থাকে memory-তে
let loc = '/';
const subs = new Set();
const go = (to) => { loc = to; console.log('go', to); subs.forEach((f) => f()); };
const useLoc = () => useSyncExternalStore((f) => (subs.add(f), () => subs.delete(f)), () => loc);
function match(pattern, path) {
  const a = pattern.split('/'), b = path.split('/'), params = {};
  if (a.length !== b.length) return null;
  for (let i = 0; i < a.length; i++) {
    if (a[i][0] === ':') params[a[i].slice(1)] = b[i];
    else if (a[i] !== b[i]) return null;
  }
  return params;
}
const routes = [['/', () => <h3>হোম</h3>], ['/products/:id', (p) => <h3>পণ্য নম্বর {p.id}</h3>]];
function Router() {
  const path = useLoc();
  for (const [pattern, View] of routes) {
    const params = match(pattern, path);
    if (params) { console.log('match', pattern, JSON.stringify(params)); return View(params); }
  }
  console.log('no match', path);
  return <h3>৪০৪</h3>;
}
const Link = ({ to, children }) => <a href={to} onClick={(e) => { e.preventDefault(); go(to); }}>{children} · </a>;
createRoot(document.getElementById('root')).render(<><Link to="/">হোম</Link><Link to="/products/7">পণ্য ৭</Link><Link to="/x/y">ভুল ঠিকানা</Link><Router /></>);
</script>

match / {}

৪ · Nested route আর Outlet: layout একবার, ভেতরটা বদলায়

“বাজারঘর”-এর ওপরে সবসময় একটি header থাকে। অ্যাকাউন্টের ভেতরে আবার একটি নিজস্ব menu থাকে। প্রতিটি পাতায় এগুলো কপি করবেন? না। URL যেমন /account/orders ভাঁজে ভাঁজে সাজানো, UI-ও তেমন। একে বলে nested route. বাবা route-এর component নিজের ভেতরে একটি ফাঁকা জায়গা রাখে, <Outlet />, আর সন্তান route সেখানে বসে। এমন বাবাকে বলে layout route.

এবার Data mode-এ পুরো অ্যাপের route দেখুন। এখানে route হলো সাধারণ JavaScript object, আর সেগুলো React-এর বাইরে একবারই তৈরি হয়।

export const router = createBrowserRouter([
  {
    id: "root",
    path: "/",
    Component: RootLayout,
    loader: rootLoader,
    HydrateFallback: Splash,
    ErrorBoundary: RootError,
    children: [
      { index: true, Component: Home },
      { path: "products", Component: Catalog, loader: catalogLoader },
      {
        path: "products/:id",
        Component: ProductPage,
        loader: productLoader,
        action: addToCartAction,
        ErrorBoundary: ProductError,
      },
      { path: "login", Component: Login, action: loginAction },
      {
        path: "account",
        middleware: [requireUser],
        Component: AccountLayout,
        children: [
          { index: true, loader: () => redirect("/account/orders") },
          { path: "orders", lazy: () => import("./routes/orders") },
          { path: "reports", lazy: () => import("./routes/reports") },
        ],
      },
      { path: "*", Component: NotFound },
    ],
  },
]);

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { RouterProvider } from "react-router/dom";
import { router } from "./router";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
);

সন্তানের path-এ শুরুর / নেই, কারণ সেটি বাবার ঠিকানার সাথে জোড়া লাগে। নিচের stepper-এর প্রতিটি log সত্যিকারের production build থেকে নেওয়া। Development-এ StrictMode render দুবার চালায়, তাই সেখানে log দ্বিগুণ দেখবেন।

matches = [ root, account, orders ]

[render] RootLayout nav=idle cart=2
[render] AccountLayout

[render] RootLayout nav=idle cart=2
[render] AccountLayout
[render] Orders

আগে = [ root, account, orders ]
এখন = [ root, account, reports ]
নেটওয়ার্ক: /assets/reports-sWvaNfC6.js

[middleware] requireUser user=রিনা
[render] RootLayout nav=loading cart=2
[render] RootLayout nav=idle cart=2
[render] Reports
h1 এখনো: আমার অ্যাকাউন্ট

এবার নিজের হাতে দেখুন। আবার শেখার মডেল: tree থেকে শিকল বানিয়ে, ভেতর থেকে বাইরে Context দিয়ে মুড়ে Outlet তৈরি।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
// শেখার মডেল: route tree থেকে layout-এর শিকল, Context দিয়ে Outlet
const Slot = createContext(null);
const Outlet = () => useContext(Slot);
function Shop() { return <div><b>বাজারঘর</b><Outlet /></div>; }
function Account() {
  const [n, setN] = useState(0);
  return <section><button onClick={() => setN(n + 1)}>layout-এর state: {n}</button><Outlet /></section>;
}
const Orders = () => <p>অর্ডারের তালিকা</p>;
const Reports = () => <p>বিক্রির রিপোর্ট</p>;
const tree = { path: '', C: Shop, kids: [{ path: 'account', C: Account, kids: [
  { path: 'orders', C: Orders }, { path: 'reports', C: Reports }] }] };
function chain(node, segs) {
  if (node.path !== segs[0]) return null;
  if (segs.length === 1) return [node];
  for (const k of node.kids ?? []) { const c = chain(k, segs.slice(1)); if (c) return [node, ...c]; }
  return null;
}
function App() {
  const [path, setPath] = useState('/account/orders');
  const nodes = chain(tree, path.split('/'));
  console.log(path, '=', nodes.map((n) => n.C.name).join(' > '));
  const ui = nodes.reduceRight((inner, n) => <Slot.Provider value={inner}><n.C /></Slot.Provider>, null);
  return <>{['orders', 'reports'].map((p) => <button key={p} onClick={() => setPath('/account/' + p)}>{p}</button>)}{ui}</>;
}
createRoot(document.getElementById('root')).render(<App />);
</script>

/account/orders = Shop > Account > Orders

৫ · URL-ই state: useSearchParams দিয়ে filter

রিনা “ঘরের জিনিস” বেছে দাম অনুযায়ী সাজালেন, তারপর একটি পণ্য খুলে Back চাপলেন। Filter যদি useState-এ থাকে, তা মুছে যায়। আবার link পাঠালে বোনও সাজানো তালিকা পান না। পর্ব ১০-এর state এখানে ভুল ঘর। যে state ঠিকানার অংশ হওয়া উচিত, তা URL-এর query অংশে রাখুন: /products?cat=home&sort=price. এই অংশকে বলে search params.

export function Catalog() {
  const { list } = useLoaderData() as { list: Product[] };
  const [params, setParams] = useSearchParams();
  const cat = params.get("cat") ?? "";

  function choose(value: string) {
    const next = new URLSearchParams(params);
    if (value) next.set("cat", value);
    else next.delete("cat");
    setParams(next);
  }
  // … select আর তালিকা
}

খেয়াল করুন, params কপি করে বদলানো হচ্ছে। এতে sort-এর মতো অন্য param হারায় না। আর setParams প্রতিবার ইতিহাসে নতুন ঘর যোগ করে। টাইপ করার সাথে সাথে search হলে setParams(next, { replace: true }) দিন, নইলে Back বোতামে অক্ষর ধরে ধরে ফিরতে হবে।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
// শেখার মডেল: useSearchParams-এর ছোট রূপ, URL থাকে memory-তে
let search = '?cat=home&sort=price';
const subs = new Set();
const useSearch = () => useSyncExternalStore((f) => (subs.add(f), () => subs.delete(f)), () => search);
function useParamsModel() {
  const params = new URLSearchParams(useSearch());
  const set = (key, value) => {
    const next = new URLSearchParams(search);
    if (value) next.set(key, value); else next.delete(key);
    search = next.size ? '?' + next : '';
    subs.forEach((f) => f());
  };
  return [params, set];
}
const items = [{ name: 'চাল', cat: 'grocery', price: 410 }, { name: 'তেল', cat: 'grocery', price: 380 },
  { name: 'গামছা', cat: 'home', price: 150 }, { name: 'জগ', cat: 'home', price: 520 }];
function Catalog() {
  const [params, set] = useParamsModel();
  const cat = params.get('cat'), sort = params.get('sort');
  const rows = items.filter((i) => !cat || i.cat === cat).sort((a, b) => (sort ? a.price - b.price : 0));
  console.log('/products' + search, '=', rows.map((r) => r.name).join(', '));
  return <div><code>/products{search}</code><br /><button onClick={() => set('cat', 'grocery')}>মুদি</button>
    <button onClick={() => set('cat', '')}>সব</button><button onClick={() => set('sort', sort ? '' : 'price')}>দাম</button>
    <ul>{rows.map((r) => <li key={r.name}>{r.name} ৳{r.price}</li>)}</ul></div>;
}
createRoot(document.getElementById('root')).render(<Catalog />);
</script>

/products?cat=home&sort=price = গামছা, জগ

৬ · Loader আর action: ডেটা আগে, পাতা পরে

পর্ব ১৩-এ আপনি useEffect দিয়ে fetch করেছেন। তার ধরন হলো: আগে খালি পাতা আঁকা, তারপর ডেটা আনা, তারপর আবার আঁকা। Nested পাতায় এতে সিঁড়ি তৈরি হয়: বাবা শেষ হলে সন্তান শুরু। Loader ক্রমটি উল্টে দেয়। Route-এর সাথে একটি async ফাংশন জুড়ে দেওয়া হয়, আর router সেটি component render হওয়ার আগেই চালায়।

async function catalogLoader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const cat = url.searchParams.get("cat");
  const sort = url.searchParams.get("sort");
  await wait(300);                      // এখানে আসল fetch বসবে
  const list = products.filter((p) => !cat || p.cat === cat);
  if (sort === "price") list.sort((a, b) => a.price - b.price);
  return { list };
}

async function productLoader({ params }: LoaderFunctionArgs) {
  const product = await getProduct(Number(params.id));
  if (!product) throw data("এই পণ্য নেই", { status: 404 });
  return { product };
}

Component শুধু useLoaderData() ডেকে তৈরি ডেটা পড়ে, তার কোনো loading শাখা লাগে না। লক্ষ করুন, request হলো Web standard Request object, যদিও এখানে কোনো server নেই। Router নিজের ভেতরেই এটি বানায়।

1async function catalogLoader() {2  log("catalog start");3  await wait(300);4  log("catalog done rows=4");5  return { list };6}7function RootLayout() { log(nav.state) }8function Catalog() {9  const { list } = useLoaderData();10  log("Catalog rows=" + list.length);11}

Pending UI: অপেক্ষার সময় কী দেখাবেন

Pending UI মানে ডেটা আসার মাঝের সময়ের সংকেত। ৩০০ ms-এর অপেক্ষাতেও ব্যবহারকারী ভাবতে পারেন ক্লিক হয়নি। Router দুই মাপে সংকেত দেয়।

const navigation = useNavigation();     // "idle" | "loading" | "submitting"
{navigation.state !== "idle" && <div role="status">লোড হচ্ছে…</div>}

// শুধু ওই link-এর পাশে
<NavLink to="/products">
  {({ isPending }) => <>পণ্য {isPending && "…"}</>}
</NavLink>

একদম প্রথম load-এ দেখানোর মতো পুরোনো পাতা থাকে না, তাই route-এ HydrateFallback দিতে হয়। আমাদের Splash সেই কাজ করে।

Action: ডেটা বদলানো আর পাতা নিজে থেকে নতুন হওয়া

Loader পড়ে, action লেখে। React Router-এর <Form> দেখতে HTML form-এর মতো, কিন্তু submit হলে server-এর বদলে route-এর action ফাংশনে যায়। Action শেষে পাতার loader-গুলো আবার চলে, একে বলে revalidation. তাই ঝুড়ির সংখ্যা হাতে বাড়াতে হয় না।

async function addToCartAction({ request, params }: ActionFunctionArgs) {
  const form = await request.formData();
  const qty = Number(form.get("qty"));
  const product = products.find((p) => p.id === Number(params.id));
  if (!product) throw data("এই পণ্য নেই", { status: 404 });
  if (!Number.isInteger(qty) || qty < 1 || qty > product.stock) {
    return data({ error: `পরিমাণ 1 থেকে ${product.stock}-এর মধ্যে দিন` }, { status: 400 });
  }
  addToCart(qty);
  return { ok: true };
}

গামছার পাতায় দুটি সত্যিকারের submit. প্রথমে ভুল পরিমাণ (99), তারপর ঠিক পরিমাণ (2):

--- qty=99
[action] add-to-cart product=3 qty=99
[render] RootLayout nav=idle cart=0
[render] ProductPage id=3
alert: পরিমাণ 1 থেকে 30-এর মধ্যে দিন    ঝুড়ি: 0

--- qty=2
[action] add-to-cart product=3 qty=2
[loader] root
[loader] product 3 start
[render] RootLayout nav=loading cart=0
[render] ProductPage id=3
[loader] product 3 done
[render] RootLayout nav=idle cart=2
[render] ProductPage id=3
ঝুড়ি: 2    url: /products/3

দুটি জিনিস লক্ষ করুন। ৪০০ status ফিরলে কোনো loader চলেনি, কারণ ডেটা বদলায়নি। সফল হলে root আর product, দুটি loader-ই আবার চলেছে, তাই header-এর ঝুড়ি 2 হলো। কখন কোন loader আবার চলবে, সেই ডিফল্ট নিয়ম হলো: নিজের route param বদলালে, search param বদলালে, অথবা action সফল হলে। শুধু পথ বদলালে আগে থেকে পর্দায় থাকা বাবার loader চলে না। নিজের মতো ঠিক করতে route-এ shouldRevalidate দেওয়া যায়। Action-এর validation browser-এ চলে, তাই এটি শুধু সুবিধা। বিশ্বাসযোগ্য যাচাই হবে server-এ, যা পর্ব ২৭-এ দেখবেন।

৭ · Error boundary, 404 আর protected route

প্রতিটি route-এর নিজের দুর্ঘটনা-ঘর

Loader, action অথবা render-এ কিছু ভাঙলে পুরো পর্দা সাদা হওয়া উচিত নয়। Route-এ ErrorBoundary দিলে সবচেয়ে কাছের error boundary শুধু ওই route-এর অংশটুকু বদলে দেয়। Header, menu অক্ষত থাকে। এখানে useRouteError error-টি দেয়, আর isRouteErrorResponse বলে দেয় এটি ইচ্ছা করে ছোড়া সাড়া (যেমন 404), না আসল বাগ।

export function ProductError() {
  const error = useRouteError();
  if (isRouteErrorResponse(error)) {
    return <h1>{error.status}: {String(error.data)}</h1>;
  }
  return <h1>পণ্য দেখানো গেল না, একটু পরে আবার চেষ্টা করুন</h1>;
}

তিন রকম ভুল ঠিকানায় সত্যিকারের ফল:

শেষ সারিটিই * route রাখার কারণ: তা না থাকলে root-এর boundary পুরো layout-এর জায়গা নেয়, header-ও চলে যায়। আর boundary-র বার্তায় error.message সরাসরি দেখাবেন না, ব্যবহারকারীকে ভেতরের তথ্য জানানোর দরকার নেই।

Protected route: পাহারা, কিন্তু তালা নয়

“আমার অর্ডার” পাতা শুধু login করা মানুষ দেখবেন। এমন route-কে বলে protected route. React Router 8-এ পাহারার পরিষ্কার জায়গা হলো route middleware: এটি সেই route আর তার সব সন্তানের loader-এর আগে চলে।

export const userContext = createContext<User | null>(null);

const requireUser: MiddlewareFunction = async ({ request, context }) => {
  const user = getUser();
  if (!user) {
    const { pathname, search } = new URL(request.url);
    throw redirect(`/login?next=${encodeURIComponent(pathname + search)}`);
  }
  context.set(userContext, user);
};

// next শুধু নিজের সাইটের ভেতরের path হলে তবেই মানা হবে
function safeNext(raw: string | null) {
  return raw && raw.startsWith("/") && !raw.startsWith("//") ? raw : "/";
}

--- login ছাড়া অ্যাকাউন্টে ক্লিক
[middleware] requireUser user=none
url /login?next=%2Faccount   scripts []

--- লগইন করে ঢোকা
[middleware] requireUser user=রিনা
…
[loader] orders for রিনা
…
[render] AccountLayout
[render] Orders
url /account/orders   scripts ['/assets/orders-LK8phY5Y.js']

--- /login?next=//evil.example/x দিয়ে লগইন
url /   host same True

Login ছাড়া ঢুকতে চাইলে scripts [], মানে অর্ডারের ফাইলটি পর্যন্ত নামেনি। Login শেষে next ফেরত নিয়ে গেল। আর safeNext না থাকলে ওই শেষ link-টি login-এর পরে ব্যবহারকারীকে অন্য সাইটে পাঠাতে পারত। এই ফাঁদের নাম open redirect.

৮ · Route ধরে code splitting আর scroll ফেরানো

যে ক্রেতা শুধু গামছা কিনতে এসেছেন, তাঁকে অ্যাডমিনের chart library কেন নামাতে হবে? Code splitting মানে JavaScript-কে ভাগ করা, আর route হলো ভাগের সবচেয়ে স্বাভাবিক দাগ। আধুনিক dynamic import (import("./x")) দেখলেই Vite একটি আলাদা chunk বানায়। Route-এর lazy সেটি প্রথম দরকারের সময় আনে।

import { useLoaderData } from "react-router";
import type { LoaderFunctionArgs } from "react-router";
import { userContext } from "../router";

// lazy এই ফাইলের loader আর Component নিজে তুলে নেয়
export async function loader({ context }: LoaderFunctionArgs) {
  const user = context.get(userContext);
  return { owner: user?.name, orders: ["#1042", "#1043"] };
}

export function Component() {
  const { orders } = useLoaderData() as { orders: string[] };
  return <ul>{orders.map((o) => <li key={o}>{o}</li>)}</ul>;
}

রিপোর্ট পাতায় একটি সত্যিকারের chart library (chart.js 4.6.1) বসিয়ে দুবার build করলাম, একবার lazy দিয়ে, একবার সব সরাসরি import করে:

$ npm run build              # lazy সহ
dist/index.html                    0.39 kB │ gzip:   0.27 kB
dist/assets/orders-LK8phY5Y.js     0.42 kB │ gzip:   0.32 kB
dist/assets/reports-sWvaNfC6.js  204.13 kB │ gzip:  70.10 kB
dist/assets/index-CfHZm8TN.js    326.34 kB │ gzip: 103.29 kB

# lazy ছাড়া, সব এক ফাইলে
dist-static/assets/index-D_WESTq1.js  529.57 kB │ gzip: 172.81 kB

হিসাব করি। সময় ≈ আকার × 8 ÷ গতি (নেটওয়ার্কের বাকি দেরি বাদ দিয়ে)। ধরে নিই গতি 1 Mbps, মানে সেকেন্ডে 1000 kilobit (অনুমিত সংখ্যা):

প্রথম load-এ ৬৯.৫২ kB, মানে প্রায় ৪০% কম নামে। ধরুন মাত্র ৫% ভিজিটর রিপোর্ট খোলেন। তাহলে ভিজিটর-প্রতি গড় ডাউনলোড 103.29 + 0.05 × 70.10 ≈ 106.80 kB. এই সংখ্যাগুলো একটি ছোট নমুনা অ্যাপের এক দফা build, সাধারণ নিয়ম নয়। Parse আর চালানোর সময়ও যোগ হবে, যা ধীর ফোনে বেশি। Bundle-এর ভেতরের হিসাব পাবেন পর্ব ৭৯-এ, আর React-এর নিজস্ব React.lazy ও Suspense পর্ব ২৩-এ।

দাম একটিও আছে: chunk নামতে যতটা সময়, প্রথমবার পাতা বদলাতে ততটাই দেরি। Run-এর log-এ দেখা গেছে দ্বিতীয়বার orders পাতায় ফিরলে scripts [], মানে ফাইল আর নামেনি।

Scroll: পাতা বদলালে কোথায় থাকবেন

MPA-তে browser নিজে scroll সামলায়। SPA-তে পাতা আসলে একই, তাই নতুন পাতাও মাঝখান থেকে দেখা দিতে পারে, আর Back চাপলে পুরোনো জায়গা হারিয়ে যায়, কারণ ডেটা তখনো আসেনি। Data mode-এ <ScrollRestoration /> root layout-এ একবার বসালেই হয়। এটি sessionStorage-এ প্রতিটি ইতিহাস-ঘরের key ধরে অবস্থান রাখে। Declarative mode-এ এটি নেই।

                    তালিকায়   পণ্যের পাতায়   Back চাপার পরে
ScrollRestoration সহ     900            0              900
ScrollRestoration ছাড়া   900            0                0

Edge-এর এই run-এ চাওয়া ফলটি মিলেছে: সামনে গেলে ওপরে, পেছনে ফিরলে আগের জায়গায়।

৯ · Server-কে জানানো: SPA fallback আর cPanel

সবচেয়ে পরিচিত অভিযোগটি হলো: “আমার কম্পিউটারে চলছিল, hosting-এ তুললাম, হোম ঠিক আছে, কিন্তু পণ্যের পাতায় reload দিলেই 404!” কারণটি পরিষ্কার। Link ক্লিকে router কাজ করে। কিন্তু reload, bookmark, WhatsApp-এর link মানে browser সরাসরি server-কে বলছে: “/products/3 পাতাটি চাই”। এটি একটি deep link. Server তখনো React Router চেনে না, আর ওই নামে কোনো ফাইল নেই।

আর dev server এই সমস্যা লুকিয়ে রাখে। Vite preview একই URL-এ 200 দেয়, আসল Apache দেয় 404. সত্যিকারের run (Apache 2.4.58, নিজের কম্পিউটারে, dist সরাসরি রেখে):

$ curl -s -o /dev/null -w "%{http_code} %{content_type}\n" <url>   # ডানের path আমরা পাশে লিখেছি
# vite preview
200 text/html  /products/3
# Apache, .htaccess ছাড়া
200 text/html  /
404 text/html; charset=iso-8859-1  /products/3
200 text/javascript  /assets/index-CfHZm8TN.js

সমাধান SPA fallback: বাস্তব ফাইল থাকলে সেটিই পাঠানো হবে, না থাকলে index.html. বাকিটা browser-এর router বুঝে নেবে। cPanel-এর সাধারণ shared hosting-এ Apache বা তার সমতুল্য server থাকে, আর সেখানে এই নিয়ম লেখা হয় .htaccess ফাইলে, mod_rewrite দিয়ে।

ইন্টারনেটে যে নিয়মটি সবচেয়ে বেশি কপি হয়, তা প্রায় ঠিক, তবে একটি ফাঁদ আছে: হারানো JavaScript ফাইলের জন্যও সে index.html দেয়। তাই এই সংস্করণটি ব্যবহার করুন। ফাইলটি Vite project-এর public/ ফোল্ডারে রাখলে build-এ dist/-তে চলে আসে।

# বাজারঘর SPA fallback
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]

# assets/ ফোল্ডারের হারানো ফাইল আসল 404 পাবে
RewriteRule ^assets/ - [L]

# বাস্তব ফাইল বা ফোল্ডার থাকলে সেটিই, না থাকলে index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

<IfModule mod_headers.c>
  <FilesMatch "\.html$">
    Header set Cache-Control "no-cache"
  </FilesMatch>
  <FilesMatch "\.(js|css)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
</IfModule>

# ইন্টারনেটের সরল নিয়ম (assets লাইন ছাড়া)
200 text/html  /products/3
200 text/html  /assets/orders-OLD123.js        ← ফাঁদ
200 text/html  /nope

# ওপরের .htaccess
200 text/html  /products/3
404 text/html; charset=iso-8859-1  /assets/orders-OLD123.js
200 text/javascript  /assets/index-CfHZm8TN.js

$ curl -si …/products/3      → Cache-Control: no-cache
$ curl -si …/assets/index-…  → Cache-Control: public, max-age=31536000, immutable

ফাঁদটি কখন কামড়ায়? নতুন version আপলোড করলে পুরোনো chunk-এর নাম হারিয়ে যায় (পর্ব ০৫-এর content hash). যে ক্রেতার tab আগে থেকে খোলা, তিনি ক্লিক করলে পুরোনো নাম চাইবেন। আমরা chunk সরিয়ে Edge-এ এটি করে দেখলাম। assets লাইন ছাড়া browser HTML পেল, আর বার্তা এলো:

RESP 200 text/html /assets/orders-LK8phY5Y.js
Failed to load module script: Expected a JavaScript-or-Wasm module script but
the server responded with a MIME type of "text/html".

আর assets লাইন থাকলে আসল 404 এলো, যা log-এ সহজে ধরা পড়ে। দুই ক্ষেত্রেই পর্দায় root boundary দেখা গেছে। তাই সেখানে “নতুন version এসেছে, পাতাটি reload করুন” বোতাম রাখা ভালো।

cPanel-এ তোলার ধাপ

1. npm run build চালান, তৈরি হবে dist/.
2. File Manager-এ public_html খুলে Settings থেকে “Show Hidden Files” চালু করুন, নইলে .htaccess চোখে পড়বে না।
3. dist ফোল্ডারটি নয়, তার ভেতরের সব public_html-এ তুলুন। আগে থেকে .htaccess থাকলে না দেখে মুছবেন না।
4. Browser-এ /products/3 সরাসরি খুলে reload দিন, আর curl -I দিয়ে status দেখুন।

Hosting ভেদে নিয়ম আলাদা হতে পারে। mod_rewrite সাধারণত চালু থাকে, তবু 500 error এলে আপনার hosting সহায়তায় জিজ্ঞেস করুন। Nginx-এ একই কাজের রূপ try_files $uri /index.html; (উদাহরণ, এখানে চালানো হয়নি)। অনেক static hosting-এর নিজস্ব rewrite সেটিং থাকে। অপশনগুলোর তুলনা পর্ব ৮২-এ।

Subfolder-এ অ্যাপ

অ্যাপ example.com/shop/-এ বসলে তিন জায়গায় ঠিকানা মেলাতে হয়। Vite-এ base, router-এ basename, আর .htaccess-এ RewriteBase. Vite-এর base ভুলে গেলে index.html /assets/… চায়, যা /shop/-এর বাইরে, তাই আমাদের run-এ 404 আর সাদা পর্দা।

# বিল্ড
npx vite build --base=/shop/

# src/router.tsx: createBrowserRouter-এর দ্বিতীয় argument
{ basename: import.meta.env.BASE_URL }

# /shop/.htaccess-এ বদল
RewriteBase /shop/
RewriteRule . /shop/index.html [L]

# সত্যিকারের run, Apache-তে /shop/products/3 সরাসরি খুলে
url /shop/products/3   h1: গামছা

১০ · AI-এর যুগে React Router

Routing-এ AI-এর ভুলের প্রধান কারণ বয়স। এই library-র API কয়েকবার বড় করে বদলেছে, আর পুরোনো কোডের নমুনা ইন্টারনেটে অনেক বেশি। AI তাই আত্মবিশ্বাসের সাথে v5-এর কোড লেখে, যা v8-এ চলবেই না। আমরা নিজেরা Switch, useHistory আর json import করে tsc চালিয়ে দেখেছি:

error TS2305: Module '"react-router"' has no exported member 'Switch'.
error TS2305: Module '"react-router"' has no exported member 'useHistory'.
error TS2305: Module '"react-router"' has no exported member 'json'.

AI-এর লেখা routing কোড নেওয়ার আগে

• package.json-এ version দেখেছি, আর সব import সেই version-এর docs-এর সাথে মিলিয়েছি
• npm run build চালিয়েছি, type error নেই, অজানা নতুন package ঢোকেনি
• প্রতিটি নতুন URL সরাসরি খুলেছি, reload দিয়েছি, Back আর Forward চেপেছি
• ভুল id আর ভুল ঠিকানায় error boundary দেখেছি, পুরো পর্দা সাদা হয়নি
• Login ছাড়া API সরাসরি ডেকে দেখেছি, server 401 বা 403 দিচ্ছে
• Diff পড়েছি, URL-এ কোনো গোপন তথ্য বা token যায়নি