Գործնական քայլեր, թե ինչպես կիրառել React երթուղիչի useParams() Hook-ը

UseParams կեռիկը կարևոր է React-ի հետ բարեկամական ինտերֆեյսի մշակման համար: Հետևաբար, կարևոր գիտելիք, որին պետք է ծանոթ լինեն React մշակողները: UseParams մանգաղը հնարավորություն է տալիս զարգացնել բարդ React ինտերֆեյսը բազմաթիվ պարամետրերով, ինչպիսիք են էլեկտրոնային առևտուրը և բլոգերների կայքերը:

Այս ձեռնարկը կենտրոնանում է գործնական քայլերի և գիտելիքների տրամադրման վրա, թե ինչպես կիրառել UseParams կեռիկը React հավելվածներում: Այս ձեռնարկը կներառի հետևյալ թեմաները.

1. Ի՞նչն է օգտագործումParams կեռիկը:

2. useParams կեռիկը կիրառելու պահանջները

3. useParams կեռիկի օգտագործման առավելությունները

4. Գործնական քայլեր, թե ինչպես կիրառել useParams կեռիկը:

Նախադրյալ:

Սա սկսնակների համար հարմար ձեռնարկ է նրանց համար, ովքեր ցանկանում են սովորել React-ը և ինչպես կիրառել React-երթուղիչի useParams կեռիկը: Թեև այս ձեռնարկից լավագույնը ստանալու համար կարևոր է ծանոթ լինել React և JavaScript որոշ հիմնական գործիքներին: Այս գործիքները ներառում են.

• React Routing,
• Քարտեզի գործառույթը և
• Կործանում.

Դուք նաև պետք է ծանոթ լինեք HTML-ին և CSS-ին։ Այսպիսով, ես խորհուրդ եմ տալիս նախ սովորել վերը նշված հասկացությունները՝ նախքան այս ձեռնարկը շարունակելը:

Ի՞նչ է օգտագործում Params hook-ը:

UseParams hook-ը React երթուղիչի կեռիկ է, որն օգտագործվում է կայքի բազմաթիվ պարամետրեր ստեղծելու և մուտք գործելու համար: Ըստ էության, useParams մանգաղը թույլ է տալիս մուտք գործել մի քանի բովանդակություն նույն URL ուղու վրա: UseParams մանգաղը հնարավորություն է տալիս յուրաքանչյուր պարամետրին ունենալ յուրահատուկ նույնականացում: Այս եզակի նույնականացման միջոցով յուրաքանչյուր պարամետր կարող է հասանելի լինել և ցուցադրվել նույն URL-ի ճանապարհով:

Էլեկտրոնային առևտուր և Բլոգ հավելվածները բազմաթիվ պարամետրերով հավելվածների օրինակներ են: Այլ օրինակներ, որտեղ useParams hook-ը նույնպես կիրառելի է, ներառում են Ուսուցման կառավարման համակարգ (LMS) – այսինքն. առցանց ուսուցողական կայքեր, կայքերի որոնման կոճակներ, հոդվածների/թերթերի վեբկայքեր և այլն:

Օրինակ, բլոգային հավելվածը պարունակում է մի քանի բլոգեր: Յուրաքանչյուր բլոգ կունենա եզակի id, որի միջոցով կարելի է մուտք գործել յուրաքանչյուր բլոգ:

UseParams կեռիկը կիրառելու պահանջները

UseParams մանգաղը ձեր React հավելվածում կիրառելու համար անհրաժեշտ են որոշ հիմնական գործիքներ և գրադարաններ: Այս բաժնում մենք կանդրադառնանք այս հիմնական պահանջներին:

1. React-router-dom

react-router-dom-ը արտաքին React գրադարան է, որն ապահովում է երթուղիներ React հավելվածներում: react-router-dom-ը գալիս է useParams կեռիկի հետ: Այսպիսով, useParams կեռիկը կիրառելու համար react-router-dom-ը պետք է տեղադրվի ձեր React հավելվածում: Ստորև բերված բաժինը ներկայացնում է react-router-dom-ի տեղադրման ուղեցույցը:

2. Բաղադրիչ

Բաղադրիչը JavaScript կոդերի շարք է, որը վերադարձնում է HTML տարրերը: React-ի բաղադրիչները որոշում են ձեր դիտարկիչում ցուցադրվող բովանդակությունը:

UseParams կեռիկը կիրառելու համար ստեղծեք բաղադրիչ և ներմուծեք useParams-ը բաղադրիչի մեջ: Հաջորդը, փոփոխական նշանակեք useParams մեթոդին՝ օգտագործելով օբյեկտների ապակառուցում: Տե՛ս ստորև բերված կոդի օրինակը:

import { useParams } from 'react-router-dom';

function Blog(){
  let { blogid } = useParams();
  return<p>my unique id is {blogid}</p>
}

3. Երթուղու պիտակ

Route թեգը նշանակում է URL-ի ուղին ձեր բրաուզերում: Route թեգը ընդունում է երկու հատկանիշ: Դրանք ներառում են ուղու հատկանիշը և տարրի հատկանիշը: Ճանապարհի հատկանիշը վերագրվում է URL ուղու: Տարրի հատկանիշը վերագրվում է մատուցվող բաղադրիչին:

UseParams մանգաղը կիրառելու համար path հատկանիշը կպարունակի նաև տեղապահ: Այն, ինչ անում է տեղապահը, այն է, որ վերադարձնում է դինամիկ բովանդակություն՝ հիմնվելով դրան համապատասխանող արժեքի վրա: Տես ստորև բերված օրինակը:

<Routes>
    <Route path='/blog/:blogid' element={<Blog />}></Route>
</Routes>

Ուշադրություն դարձրեք հետևյալին.

• blogid-ը տեղապահ է և կարող է լինել ձեր ընտրած ցանկացած անուն:
• Տեղապահը սովորաբար պարունակում է ':' իր արժեքից առաջ:
• Տեղապահի անունը պետք է համապատասխանի բաղադրիչում useParams մեթոդին հատկացված արժեքին:
• Այսպիսով, URL-ի ուղին–/blog/2 կվերադարձնի բլոգի բովանդակությունը id համարով –2:

UseParams կեռիկի օգտագործման առավելությունները

UseParams կեռիկը շատ առավելություններ ունի ինչպես React մշակողների, այնպես էլ օգտատերերի համար: Ստորև ներկայացված են useParams կեռիկի օգտագործման առավելություններից մի քանիսը:

• Բազմաթիվ պարամետրեր. useParams կեռիկը օգտագործվում է դինամիկ բովանդակություն պարունակող բազմաթիվ պարամետրեր ստեղծելու համար: Այսպիսով, useParams մանգաղի օգտագործումը ձեր հավելվածներում օգտատերերին տրամադրում է տեղեկատվության մեծ լողավազան բարեկամական ձևով:
• Բարձրացրեք հավելվածի արդյունավետությունը. useParams կեռիկը ցուցադրում է դինամիկ բովանդակությունը նույն URL-ի ճանապարհով: Սա մեծացնում է հավելվածի աշխատանքը և նվազեցնում բեռնման ժամանակը:
• Հեշտ հասանելիություն. useParams hook-ը հարմար գործիք է, որը հեշտացնում է բազմաթիվ պարամետրերի և բովանդակության հասանելիությունը:
• Ավելի քիչ կոդեր. useParams կեռիկը ծրագրավորողներին հնարավորություն է տալիս ստեղծել մի քանի պարամետր կոդի մի քանի տողերով: Ըստ էության, սա վերացնում է ավելորդ կրկնությունները և նվազեցնում է գրվող կոդերի քանակը:

Գործնական քայլեր, թե ինչպես կիրառել UseParams կեռիկը React-ում:

Այս բաժնում մենք կկառուցենք պարզ էլեկտրոնային առևտրի ինտերֆեյս, որը կցուցադրի բազմաթիվ ապրանքներ: Յուրաքանչյուր ապրանք կունենա յուրահատուկ ID, որի միջոցով մենք կարող ենք մուտք գործել դրանք:

Այս բաժինը կբաժանվի երեք մասի.

1. Առաջին մասը կուղղորդի մեզ, թե ինչպես ստեղծել React հավելված:
2. Երկրորդ մասը կուղղորդի մեզ, թե ինչպես ստեղծել պարզ էլեկտրոնային առևտրի ինտերֆեյս:
3. Երրորդ մասը կուղղորդի մեզ, թե ինչպես կիրառել useParams մանգաղը մեր նախագծում:

Եկեք սկսենք.

Մաս առաջին — Ստեղծեք React նախագիծ

Ստորև բերված քայլերը մեզ առաջնորդում են React հավելված ստեղծելու և react-router-dom-ի տեղադրման հարցում:

Քայլ 1. Ստեղծեք React հավելվածը

Ձեր react հավելվածը ստեղծելու համար հետևեք ստորև ներկայացված հրահանգներին:

1. Բացեք ձեր տերմինալը և ստեղծեք նոր թղթապանակ ձեր React հավելվածի համար:
2. Նավարկեք ձեր նոր ստեղծված թղթապանակ և ստեղծեք նոր React հավելված: Օգտագործեք ստորև նշված հրամաններից որևէ մեկը՝ ձեր React հավելվածը ստեղծելու համար:

C:\Users\Username\Desktop>mkdir react-app
C:\Users\Username\Desktop>cd react-folder
C:\Users\Username\Desktop\react-folder>npx create-react-app my-app

OR

C:\Users\Username\Desktop\react-folder>npm init react-app my-app

OR

C:\Users\Username\Desktop\react-folder>yarn create react-app my-app

Ուշադրություն դարձրեք հետևյալին.

• React հավելված ստեղծելու համար դուք պետք է ունենաք node.js-ը տեղադրված ձեր համակարգում: Եթե ​​դուք չունեք node.js ձեր համակարգում, այցելեք https://node.js.org՝ այն տեղադրելու համար:
• react-app և my-app-ը համապատասխանաբար ձեր թղթապանակի և react հավելվածի անունն է: Դրանք կարող են լինել ձեր ընտրած ցանկացած անուն:

Քայլ 2. Տեղադրեք React-router-dom

Ստորև բերված հրահանգները մեզ ուղղորդում են տեղադրել React-router-dom մեր React նախագծում:

1. Նավարկեք ձեր հավելվածի գրացուցակը ձեր տերմինալում:
2. Տեղադրեք react-router-dom-ը՝ օգտագործելով npm կամ yarn:

Տե՛ս ստորև բերված կոդի օրինակը:

C:\Users\Username\Desktop\react-folder>cd my-app
C:\Users\Username\Desktop\react-folder\my-app>npm install react-router-dom

Քայլ 3. գործարկել սերվերը

Քանի դեռ ձեր հավելվածների գրացուցակում եք, գործարկեք ձեր React հավելվածի սերվերը ճիշտ այնպես, ինչպես ստորև նշված կոդերը:

C:\Users\Username\Desktop\react-folder\my-app>npm start

Մանվածք օգտագործողներ.

C:\Users\Username\Desktop\react-folder\my-app>yarn start

Նշում. օգտագործեք npm կամ yarn React-ի կախվածությունները տեղադրելու և React սկրիպտները գործարկելու համար՝ կախված նրանից, թե ինչ եք օգտագործում ձեր React հավելվածը ստեղծելու համար:

Մեկնարկային սցենարը գործարկում է ձեր react հավելվածի սերվերը localhost:3000 վրա:

Երկրորդ մաս - Ստեղծեք պարզ էլեկտրոնային առևտրի ինտերֆեյս

Մենք հաջողությամբ ստեղծեցինք մեր React հավելվածը և տեղադրեցինք react-router-dom-ը: Հաջորդը, մենք այժմ կարող ենք ստեղծել պարզ էլեկտրոնային առևտրի ինտերֆեյս:

Քայլ 1. Փոփոխեք index.js ֆայլը

Բացեք ձեր React հավելվածը ձեր ընտրած կոդերի ցանկացած խմբագրիչով և հետևեք ստորև նշված հրահանգներին՝ index.js ֆայլը փոփոխելու համար:

1. Բացեք ձեր index.js ֆայլը src գրացուցակում:
2. Ներմուծեք BrowserRouter react-router-dom-ից՝ օգտագործելով օբյեկտների ապակառուցում:
3. Թարմացրեք արմատային արժեքը՝ հավելվածի բաղադրիչը փաթաթելով BrowserRouter պիտակների միջև:

index.js ֆայլի վերջնական կոդերը պետք է նման լինեն ստորև ներկայացված կոդի օրինակին:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Քայլ 2. Ստեղծեք Ապրանքներ բաղադրիչ

Այս բաղադրիչը կպահի մեր արտադրանքի տվյալները: Բայց նախքան «Ապրանքների» բաղադրիչ ստեղծելը, նախ src գրացուցակում ստեղծեք պատկերի թղթապանակ: Պատկերի թղթապանակը պետք է պարունակի օգտագործվող բոլոր անհրաժեշտ պատկերները: Հաջորդը, հետևեք ստորև ներկայացված հրահանգներին՝ Ապրանքների բաղադրիչները ստեղծելու համար:

1. Ստեղծեք բաղադրիչների թղթապանակ src գրացուցակում:
2. Ստեղծեք Products.js ֆայլ բաղադրիչների պանակում:
3. Բացեք ձեր Products.js ֆայլը և ստեղծեք Products փոփոխական:
4. Վերագր Products փոփոխականը օբյեկտների զանգվածին: Այս օբյեկտներից յուրաքանչյուրը պետք է պարունակի եզակի ID, վերնագիր, նկարագրություն և պատկեր:
5. Արտահանել Ապրանքների բաղադրիչը:

Տե՛ս ստորև բերված կոդի օրինակը:

const Products = [
    {
        id: 1,
        title: "Product Name",
        description: "This is the description of product with an id of 1. Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur. ",
        image:  require('../images/product-1.png')
    },
    {
        id: 2,
        title: "Product Name",
        description: "This is the description of product with an id of 2. Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur. ",
        image:  require('../images/product-2.png')
    },
    {
        id: 3,
        title: "Product Name",
        description: "This is the description of product with an id of 3. Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur. ",
        image: require('../images/product-3.png')
    }
]

export default Products;

Քայլ 3. Ստեղծեք քարտի բաղադրիչ

Քարտի բաղադրիչի էությունն այն է, որ մեր արտադրանքը պտտվի և կազմակերպվի դրանք: Հետևյալ հրահանգները մեզ ուղղորդում են, թե ինչպես ստեղծել քարտի բաղադրիչը:

1. Ստեղծեք Card.js ֆայլ բաղադրիչների գրացուցակում:
2. Բացեք Card.js ֆայլը և ներմուծեք Products բաղադրիչը:
3. Ստեղծեք Քարտի ֆունկցիա վերադարձի մեթոդով:
4. Քարտի ֆունկցիայի մեջ վերադարձի մեթոդից առաջ ստեղծեք productItems փոփոխական:
5. Նշանակե՛ք productItems փոփոխականը քարտեզի գործառույթին, որը կրկնվում է մեր Ապրանքների միջոցով: Քարտեզի գործառույթը պետք է նման լինի ստորև բերված կոդի օրինակին:

const productItems = Products.map(store =>{
    const {id, title, description, image} = store;
    return(
      <div key={ id } className="card">
        <img src={image} alt=""></img>
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    )
})

6. Քարտ ֆունկցիայի վերադարձի եղանակով ստեղծեք հատվածի պիտակ: Բաժինների պիտակների միջև պետք է լինի մեր productItems գանգուր փակագծերը:

7. Արտահանման քարտի բաղադրիչ:

Card.js ֆայլի մեր վերջնական կոդերը նման կլինեն ստորև ներկայացված կոդի օրինակին:

import Products from "./Products";

function Card(){

    const productItems = Products.map(store =>{
        const {id, title, description, image} = store;
        return(
            <div key={ id } className="card">
                <img src={image} alt=""></img>
                <h3>{title}</h3>
                <p>{description}</p>
            </div>
        )
    })

    return (
        <>
            <section className="card-section">
                {productItems}
            </section>
        </>
    );
};

export default Card;

Քայլ 4. Ոճավորեք քարտի բաղադրիչը

Ավելացրեք մի քանի CSS ոճեր մեր Քարտի բաղադրիչին index.css ֆայլում:

Նշում. Քարտ բաղադրիչի մեր div թեգը և հատվածի պիտակը պարունակում են className հատկանիշներ: Այս className ատրիբուտները նպատակաուղղված են ստեղծվել CSS ոճավորման համար:

Բացեք index.css ֆայլը src գրացուցակում և կիրառեք ստորև բերված CSS ոճերը:

.card-section{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px;
}

.card{
  padding: 1.2rem;
  font-size: 1.2rem;
  border: 1px solid rgb(104, 101, 101);
}

Քայլ 5. Ստեղծեք գլխավոր էջ

Գլխավոր էջը կծառայի որպես մեր հավելվածի լռելյայն էջ և կարտադրի մեր քարտի բաղադրիչը: Ստորև բերված կետերը մեզ ուղղորդում են ստեղծելու մեր գլխավոր էջը

1. Ստեղծեք էջերի թղթապանակ src գրացուցակում:
2. Ստեղծեք Home.js ֆայլ էջերի պանակում:
3. Բացեք Home.js ֆայլը և ներմուծեք Card բաղադրիչը:
4. Ստեղծեք Home ֆունկցիա վերադարձի մեթոդով: Վերադարձի մեթոդը պետք է պարունակի մեր Քարտի տարրը:
5. Արտահանել Home.js ֆայլը:

Տե՛ս ստորև ներկայացված ծածկագրերը:

import Card from "../components/Card"

function Home(){
    return (
        <>
            <h1>Home Page</h1>
            <Card />
        </>
    )
}

export default Home;

Քայլ 6. Փոփոխել App.js ֆայլը

App.js ֆայլը արմատային բաղադրիչն է, որը որոշում է, թե ինչ պետք է ներկայացվի մեր դիտարկիչում: Այս քայլում մենք կփոփոխենք մեր App.js ֆայլը՝ մեր էջերը մատուցելու համար: Ստորև բերված հրահանգները մեզ ուղղորդում են փոփոխելու մեր App.js բաղադրիչը:

1. Բացեք ձեր App.js ֆայլը և ներմուծեք Home բաղադրիչը:
2. Թարմացրեք App.js ֆայլի վերադարձի եղանակը, որպեսզի պարունակի Home տարրը, ինչպես երևում է ստորև նշված ծածկագրում:

import React from 'react';
import './App.css';
import Home from './pages/Home';

function App() {

  return (
    <div className="App">
      <Home />
    </div>
  );
}

export default App;

Պահպանեք բոլոր ֆայլերը և ձեր բրաուզերում անցեք localhost:3000: Արդյունքը նման կլինի ստորև ներկայացված սքրինշոթին:

Հիանալի աշխատանք մեր էլեկտրոնային առևտրի ինտերֆեյսի ստեղծման գործում: Բայց դեռ շատ աշխատանք կա անելու։ Օրինակ, մեր ապրանքի նկարագրությունը պետք է պարունակի ավելի քիչ բառեր, և յուրաքանչյուր քարտում պետք է լինի հղում, որը մեզ ուղղորդում է դեպի յուրաքանչյուր ապրանք: Այսպիսով, մենք կկիրառենք useParams կեռիկը:

Մաս երրորդ — Կիրառեք useParams կեռիկը

UseParams մանգաղը մեզ հնարավորություն կտա ստեղծել օգտատերերի համար հարմար ինտերֆեյս՝ յուրաքանչյուր ապրանքին իր յուրահատուկ ID-ների միջոցով մուտք գործելու թույլտվությամբ: UseParams կեռիկը գալիս է React-router-dom փաթեթով: Այսպիսով, մենք պետք է ներմուծենք useParams կեռիկը react-router-dom-ից՝ նախքան դրանք կիրառելը: Եկեք սկսենք.

Քայլ 1. Ստեղծեք ProductDetail էջ

ProductDetail էջը կպարունակի և կներկայացնի յուրաքանչյուր ապրանքի ամբողջական մանրամասնությունը՝ հիմնվելով նրա եզակի ID-ի վրա: Ստորև բերված հրահանգները մեզ ուղղորդում են ստեղծել ProductDetail էջը:

1. Ստեղծեք ProductDetail.js ֆայլ էջերի պանակում:
2. Բացեք ProductDetail.js ֆայլը և ներմուծեք հետևյալը.

• Ապրանքների բաղադրիչ բաղադրիչի թղթապանակից
• useParams react-router-dom-ից՝ օգտագործելով օբյեկտների ապակառուցում:

3. Ստեղծեք ProductDetail ֆունկցիա վերադարձի մեթոդով:

4. Հանձնարարեք 'id'-ը ProductDetail ֆունկցիայի մեջ Params մեթոդի օգտագործման համար, բայց վերադարձի մեթոդից առաջ: Տե՛ս ստորև բերված կոդի օրինակը:

let { id } = useParams()

5. Ստեղծեք արտադրանքի փոփոխական և վերագրեք այն գտնել մեթոդին: Օրինակ:

const product = Products.find(product => String(product.id) === id);

Այստեղ գտնելու մեթոդն օգտագործվում է յուրաքանչյուր ապրանքի ID-ին համապատասխանելու համար, որպեսզի ապրանքի այլ մանրամասներ հասանելի լինեն:

6. Ստեղծեք բաժնի թեգ ProductDetails ֆունկցիայի վերադարձի եղանակով: Բաժնի պիտակը պետք է պարունակի հիմնական հատկանիշ, որը նշանակված է id-ին գանգուր փակագծերում:

7. Ստեղծեք մյուս պիտակը ճիշտ այնպես, ինչպես ստորև նշված կոդը:

8. Արտահանել ProductDetail.js ֆայլը:

ProductDetail.js ֆայլի վերջնական կոդերը նման կլինեն ստորև ներկայացված կոդի օրինակին:

import { useParams } from "react-router-dom";
import Products from "../components/Products";

function ProductDetail() {
 
   let { id } = useParams();
    const product = Products.find(product => String(product.id) === id);

    return (
        <>
            <section key={id} className="details-section">
                <img src={product.image} alt=""></img>
                <div>
                    <h3>{product.title}</h3>
                    <p>{product.description}</p>
                </div>
            </section>
       </>
    )
}

export default ProductDetail;

Քայլ 2. Style productDetail էջը

Ավելացրեք CSS ոճեր՝ գեղեցկացնելու և կազմակերպելու մեր productDetail էջը index.css ֆայլում: Նկատի ունեցեք, որ մենք արդեն տվել ենք մեր բաժնի թեգը productDetail էջում className:

.details-section{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 90px;
  font-size: 1.3rem;
}

Քայլ 3. Ստեղծեք երթուղիներ

Երթուղիները մեզ ուղղորդում են դեպի URL ուղին՝ մեր բովանդակություն մուտք գործելու համար: Մենք կստեղծենք բոլոր անհրաժեշտ երթուղիները App.js ֆայլում: Ստորև բերված հրահանգները մեզ ուղղորդում են ստեղծելու մեր երթուղիները:

1. Բացեք App.js ֆայլը և ներմուծեք հետևյալը.
   - ProductDetail էջերի պանակից,
   - Routes և Route react-router-dom-ից:
2. Թարմացրեք App.js ֆունկցիայի վերադարձի մեթոդը հետևյալով.
   1. Ստեղծեք Routes թեգ:
   2. Ստեղծեք երկու Route թեգեր Routes թեգերի միջև: Խնդրում ենք նկատի ունենալ երթուղիների և երթուղիների տարբերությունը՝ դրանք չխառնելու համար:
   3. Յուրաքանչյուր երթուղի պիտակ պետք է պարունակի ուղի և տարրի հատկանիշ:

Տե՛ս ստորև բերված կոդի օրինակը:

import React from 'react';
import './App.css';
import Home from './pages/Home';
import ProductDetails from './pages/ProductDetails';
import { Route, Routes } from 'react-router-dom';

function App() {

  return (

    <div className="App">

      <Routes>
        <Route path='/' element={<Home />}></Route>
        <Route path='/product/:id' element={<ProductDetails />}></Route>
      </Routes>

    </div>

  );
}

export default App;

Ուշադրություն դարձրեք հետևյալին.

• Մեր առաջին երթուղու ուղին նշանակված է '/'-ին, որը նշանակում է URL-ի կանխադրված ուղին: URL-ի կանխադրված ուղին ցուցադրում է մեր Home բաղադրիչը:
• Մեր երկրորդ Երթուղու ուղին նշանակված է product-ին՝ տեղապահով–:id:

Քայլ 4. Փոփոխել card.js բաղադրիչը

Ստորև բերված հրահանգները մեզ ուղղորդում են փոփոխել քարտի բաղադրիչը:

1. Բացեք Card.js ֆայլը և ներմուծեք Link react-router-dom-ից:
2. Տեղադրեք Link պիտակը p պիտակի միջև՝ քարտի բաղադրիչի վերադարձի եղանակով: Link թեգը պետք է պարունակի to հատկանիշ: Տե՛ս ստորև բերված կոդի օրինակը:

<Link to={`/product/${id}`}>See more</Link>

Նկատի ունեցեք, որ մեր to ատրիբուտների արժեքը օգտագործում է հետադարձ նշան ( ` ) և ձևանմուշ բառացի ( ${}) արժեք-id-ով: Սա յուրաքանչյուր պարամետրի URL ուղին մուտք գործելու ստանդարտ մեթոդ է:

3. Նկարագրության բառերը կրճատե՛ք Slice մեթոդի միջոցով:

Քարտի բաղադրիչների վերջնական կոդերը պետք է նման լինեն ստորև ներկայացված կոդի օրինակին:

import { Link } from "react-router-dom";
import Products from "./Products";

const Card = () => {

   const productItems = Products.map(store =>{
        const {id, title, description, image} = store;
        return(
            <div key={ id } className="card">
                <img src={image} alt=""></img>
                <h3>{title}</h3>
                <p>{description.slice(0, 100)}<Link to={`/product/${id}`}>See more</Link></p>
            </div>
        )
    })

    return (
        <>
            <section className="card-section">
                {productItems}
            </section>
        </>
    );
};

export default Card;

Պահպանեք ձեր բոլոր ֆայլերը և նավարկեք դեպի ձեր բրաուզերը: Ստորև բերված gif պատկերը ցույց է տալիս մեր նախագծի արդյունքը: Յուրաքանչյուր ապրանք այժմ կարող է հասանելի լինել իր եզակի ID-ների միջոցով:

Եզրակացություն

Այս փաստաթուղթը համապարփակ գիտելիքներ է տալիս useParams մանգաղի մասին: UseParams կեռը կարևոր է React հավելվածներ ստեղծելու համար, որոնք պահանջում են բազմաթիվ պարամետրեր: Այսպիսով, յուրաքանչյուր պարամետրի հեշտ մուտքի հնարավորություն ընձեռելով օգտագործողի համար հարմար եղանակով:

Շնորհակալություն կարդալու համար և հուսով եմ, որ այս ձեռնարկը ձեզ համար օգտակար կլինի:

Լրացուցիչ ռեսուրսներ

• React Router. Ինչպես օգտագործել useParams() Hook-ը
• Ինչպես օգտագործել UseParams կեռիկը React Router-ում

Շնորհակալություն մինչև վերջ կարդալու համար: Խնդրում ենք հետևել գրողին և այս հրապարակմանը: Այցելեք Stackademic՝ ավելին իմանալու համար, թե ինչպես ենք մենք ժողովրդավարացնում անվճար ծրագրավորման կրթությունն ամբողջ աշխարհում: