React Router හි මාර්ගය සඳහා දත්ත බෑගය

පෙර පාඩමේ දී අපි දත්ත නිෂ්පාදන ගබඩාවෙන් උපුටා ගත්තෙමු. දැන් මෙම දත්ත මාර්ග අංගයට පූරණය කළ යුතුය. මේ සඳහා භාවිතා කරන්නේ බෑග් ආම්පන්නය (loader). දැන් අපි එය නිර්මාණය කරමු.

root.jsx විවෘත කරන්න, අපි මෙතනට ආයාත රේඛාව getProducts සිට forStorage.js එකතු කරමු:

routes/root.jsximport { getProducts } from '../forStorage'

ආයාත රේඛාවලට පසුවම සහ ශ්‍රිතයට පෙර Root අපි ශ්‍රිතයේ කේතය loader ලියන්නෙමු, එය getProducts හරහා වනු ඇත අපට ගබඩාවෙන් නිෂ්පාදන සමඟ දත්ත ආපසු ලබා දෙන්න . සාමාන්‍යයෙන් එවැනි ශ්‍රිත ලිවිය යුතුය වෙනම ගොනුවක, නමුත් අපි ටිකක් අලස, එබැවින් අනතුරු ඇඟවීම කෙරෙහි අවධානය යොමු නොකරන්න:

routes/root.jsxexport async function loader() {
  const products = await getProducts();
  return { products };
}

දැන් අපි අපේ ආයාතය එකතු කරමු බෑගය main.jsx වෙත. මෙය බෑගය අප සඳහා වනු ඇත මූල, එබැවින් අපි එය නම් කරමු rootLoader:

main.jsximport Root, { loader as rootLoader } from './routes/root';

එය අපගේ මාර්ග වස්තුවට එකතු කරන්න ගුණයේ loader:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    loader: rootLoader,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },
]);