React Router įdiegimas Redux programoje

Ankstesnėse pamokose mes įdiegėme pagrindinius įrankius darbui su Redux. Dažnai būna taip, kad programai reikia maršrutizatoriaius naršymui po jos internetiniais puslapiais ir mūsų programa nebus išimtis. Tam mes įdiegsime biblioteką React Router.

Atidarykime mūsų projektą ir terminale įveskime šią komandą:

terminalnpm install react-router-dom

Šiek tiek žengdami į priekį, pasakysiu, kad mūsų Redux programa tradiciškai skirta produktams, apie kuriuos informaciją paskelbia tam tikri pardavėjai. Todėl dabar mes šiek tiek perdarysime pagrindinį komponentą App, o taip pat pridėsime į programą funkcionalumą maršrutizavimo vykdymui.

Pirmiausia eikime į aplanką src, o po to į app ir čia sukurkime failą root.jsx. Tai bus mūsų svetainės šaknis: kairėje pusėje turėsime meniu, o dešinėje - turinį (kol kas čia turime tik antraštę):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Produktai</a>
          <a>Pardavėjai</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>Tai yra mano pirmoji Redux programa!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

O komponentą App mes perdarysime. Pirmiausia visiškai ištrinkime jo turinį. Tada importuokime dvi funkcijas maršrutizatoriui ir mūsų šakninį komponentą Root:

App.jsximport { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

Žemiau po importo sukurkime maršrutizatorių, ir surašykime pirmąjį maršrutą, perduodę jam mūsų Root kaip rodomą elementą ir, atitinkamai, nustatę kelią į '/'. Ateityje App mes pridėsime ir kitus reikalingus maršrutus:

App.jsxconst router = createBrowserRouter([{ path: '/', element: <Root /> }])

Žemiau parašykime funkcijos App kodą:

App.jsxfunction App() {
  return <RouterProvider router={router} />
}

export default App

Viskas. Paleidžiame. Kitoje skiltyje mes realizuosime komponentus Redux programos darbui.

Pabaigai pridėkime šiek tiek grožio, surašę tam stilius index.css:

index.cssbody {
  font-size: 24px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

ul {
  list-style: none;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
}

a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
}

#main {
  display: flex;
  margin: 20px;
}

#menu {
  margin-right: 50px;
  padding-top: 50px;
  padding-right: 50px;
  border-right: 2px solid lightgray;
  font-weight: bold;
}