Yakagadziriswa: alphabet array jsreact router

Dambudziko guru rine hukama nealphabet array jsreact router nderekuti zvinogona kunetsa kubata nzira yekushandisa yakaoma. Alphabet array jsreact router inoda vanogadzira kuti vatsanangure nzira yega yega, iyo inogona kutora nguva uye kukanganisa. Pamusoro pezvo, haipe chero yakavakirwa-mukati tsigiro yeane simba nzira kana nested nzira, izvo zvinoita kuti zviome kugadzira yakaoma maapplication ane akawanda mazinga ekufambisa. Chekupedzisira, kushaikwa kwerutsigiro rwakavakirwa-mukati rwekusimbisa uye mvumo kunoreva kuti vanogadzira vanofanirwa kuita yavo yekudzivirira matanho kana vachishandisa alphabet array jsreact router.

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const alphabetArray = ["A", "B", "C", "D", "E", "F", "G"];

function App() {

  return (
    <Router>

      <div>

        {alphabetArray.map((letter, index) => (

          <Link key={index} to={`/${letter}`}>{letter}</Link>

        ))}

        {alphabetArray.map((letter, index) => (

          <Route key={index} path={`/${letter}`} render={() => (<h1>You are on the page for letter: {letter}</h1>)} /> 

        ))} 

      </div>  
      
    </Router>  
  );  
};  
export default App;

1. Kodhi iyi inopinza raibhurari yeReact uye BrowserRouter, Route, uye Link zvikamu kubva muraibhurari react-router-dom.
2. Inogadzira tambo dzakawanda dzinonzi alphabetArray ine mavara manomwe mairi.
3. Iyo App () basa rinoziviswa iro rinodzosera Router chikamu chine div mukati maro.
4. Mukati me div, pane mepu() nzira inodzokorodza kuburikidza nebhii rega rega mualphabetArray uye inogadzira chikamu cheChinongedzo chechimwe nechimwe chine kiyi yacho yakaiswa kundekisi yayo muhurongwa uye hunhu hwakaiswa ku`/${tsamba} `.
5. Pane imwe nzira yemepu() inodzokorodza nemavara ega ega mualphabetArray uye inogadzira chikamu cheNzira kune chimwe nechimwe chine kiyi yayo yakaiswa kundekisi yayo muhurongwa, maitiro ayo akaiswa ku `/${tsamba}`, uye a render prop inodzosa h1 element ine mavara ekuti uri papeji ripi zvichibva pane tsamba yakadzvanywa kubva kuLinganiso zvikamu zvakagadzirwa kare.
6. Pakupedzisira, App () inotengeswa kunze seyakagadzika saka inogona kushandiswa kune imwe nzvimbo mukushandiswa.

Maitiro ekugadzira Alphabet JavaScript Array

1. Gadzira chikamu chitsva cheReact uye pinza iyo React Router raibhurari:

import React kubva 'react';
pinza {BrowserRouter seRouter} kubva 'react-router-dom';

2. Tsanangura nhevedzano yemavara muarufabheti:
const alphabet = [“A”, “B”, “C”, “D”, “E”, “F”, “G”, “H”, “I”, “J”,”K”,”L ”,”M”,”N”,”O”,”P”,”Q”,”R”,”S”,”T”,”U”,”V”,”W” ,X” , "Y" ,"Z"];

3. Gadzira basa kuti ugadzire mavara arufabheti akawanda:
const generateAlphabetArray = () => {rega alphabetArray = []; zve (rega i=0; i

); }

React JS sefa, tsvaga uye rongedza zvinhu uchishandisa react-router

React Router iraibhurari ine simba yenzira yeReact iyo inobvumira vanogadzira kuti vagadzire zvine simba, peji rimwe chete maapplication nerubatsiro rwezvikamu, nzira, uye paramita. Inopa nzira iri nyore yekusefa, kutsvaga uye kuronga zvinhu muReact application.

Kusefa: Kusefa kunobvumira vashandisi kudzikisa pasi mibairo nekushandisa chaiyo maitiro senge chikamu kana mutengo wemhando. Izvi zvinogona kuitwa uchishandisa React Router query parameters iyo inobvumira vanogadzira kuti vapfuure mumatambo emubvunzo sechikamu cheURL. Semuyenzaniso, kana waida kusefa rondedzero yezvigadzirwa nechikamu waigona kuwedzera query parameter se"?category=electronics" inongoratidza zvigadzirwa kubva muchikamu ichocho.

Kutsvaga: Kutsvaga kwakafanana nekusefa asi kunobvumira vashandisi kutsvaga zvimwe zvinhu mukati merondedzero kana muunganidzwa. Izvi zvinogona kuitwa uchishandisa React Router pathname parameter iyo inotora mumutengo wetambo uye inotsvaga nepakati penzira dzese dziripo dzemachisi. Semuyenzaniso, kana waida kutsvaga “iPhone” mukati mechigadzirwa chako unokwanisa kushandisa “/products/search?q=iphone” sepamemita yezita rako uye yaizodzosera zvese zvigadzirwa zvine “iPhone” muzita kana tsananguro.

Kuronga: Kuronga kunobvumira vashandisi kuodha zvinhu zvichibva pane mamwe maitiro akadai semutengo kana zuva rakawedzerwa. Izvi zvinogona kuitwa uchishandisa React Router sortBy parameter iyo inotora munhevedzano yezvinhu zvine maitiro ekurongeka senge zita remunda (semuenzaniso, mutengo) uye gwara (semuenzaniso, kukwira). Semuyenzaniso, kana waida kuronga rondedzero yechigadzirwa chako nemutengo kubva pakaderera kusvika pakakwirira waigona kushandisa “/products/sortBy?field=price&direction=ascending” seyekurongaBy parameter uye yaizodzosera zvese zvigadzirwa zvakarongwa saizvozvo.