React Router හි තවත් මාර්ගයක් එකතු කිරීම

අපට ප්‍රධාන පිටුවට යන මූල මාර්ගය ඇත, එහි නිෂ්පාදන සඳහා සබැඳි ඇත. දැන් අපි තවත් මාර්ගයක් එකතු කරමු, එවිට සබැඳිවලින් එකක් මත ක්ලික් කළ විට දෝෂ තිරයක් නොව නිෂ්පාදනය සඳහා පිටුව පෙන්වනු ඇත.

පළමුව, අපි පසුගිය පාඩම්වලදී සාදන ලද අපගේ යෙදුම විවෘත කර, අපි routes ෆෝල්ඩරය තුළ product.jsx ගොනුව සාදමු. එහි Product කොම්පෝනන්ටය සාදමු:

routes/product.jsxfunction Product() {}

export default Product;

දැන් අපි Product ඇතුළත product වස්තුව සාදමු, ගුණාංග සමඟ name, cost සහ amount, දැනට මේවා යම් ස්ථාවර අගයන් වනු ඇත:

routes/product.jsxfunction Product() {
  const product = {
    name: 'Product',
    cost: 400,
    amount: 5,
  };
}

export default Product;

නිෂ්පාදන පිටුවේ අපි පිළිවෙලින් එහි නම, පිරිවැය සහ ප්‍රමාණය ප්‍රදර්ශනය කරමු:

routes/product.jsxreturn (
  <div>
    <h2>නිෂ්පාදන පිටුව</h2>
    <p>නම: {product.name}</p>
    <p>පිරිවැය: {product.cost}</p>
    <p>ප්‍රමාණය: {product.amount}</p>
  </div>
);

Product කොම්පෝනන්ටය අනිවාර්යයෙන්ම ආයාත කරන්න main.jsx ගොනුවට:

main.jsximport Product from './routes/product';

අවසාන වශයෙන්, තවත් මාර්ගයක් අපගේ යෙදුමට එකතු කරමු, මෙය මූල මාර්ගයට පසුව කරමු. මාර්ගය ලෙස 'products/:productId' සඳහන් කරන්න, සහ ප්‍රදර්ශනය කිරීම සඳහා අංගය ලෙස අපි Product කොම්පෝනන්ටය භාවිතා කරමු:

main.jsx{
  path: '/',
  element: <Root />,
  errorElement: <ErrorPage404 />,
},
{
  path: 'products/:productId',
  element: <Product />,
},

දැන් අපි යෙදුම ආරම්භ කරමු, සබැඳි මත ක්ලික් කර අපි නිෂ්පාදන පිටුවට පැමිණෙමු (දැනට එය සියලු සබැඳි සඳහා එක හා සමානය), දෝෂයකට නොව.