React Router-un Redux Tətbiqində Quraşdırılması

Əvvəlki dərslərdə biz Redux ilə iş üçün əsas alətləri quraşdırdıq. Tez-tez olur ki, tətbiqin onun veb səhifələri arasında naviqasiya üçün marşrutlaşdırıcıya ehtiyacı olur və bizim tətbiqimiz istisna olmayacaq. Bunun üçün biz React Router kitabxanasını quraşdıracayıq.

Layihəmizi açaq və terminalda aşağıdakı əmri daxil edək:

terminalnpm install react-router-dom

Bir az irəli qaçaraq deyim ki, bizim Redux tətbiqimiz ənənəvi olaraq satıcılar tərəfindən yerləşdirilən məhsullara həsr olunub. Buna görə də indi biz əsas komponent App-i bir az dəyişdirəcəyik, həmçinin tətbiqə marşrutlaşdırmanı həyata keçirmək üçün funksionallıq əlavə edəcəyik.

Başlamaq üçün src qovluğuna, sonra isə app qovluğuna daxil olaq və burada root.jsx faylını yaradaq. Bu bizim saytımızın kökü olacaq: solda menyumuz olacaq, sağda isə məzmun (hələlik bizdə burada yalnız başlıq var):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Məhsullar</a>
          <a>Satıcılar</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>Bu mənim ilk Redux tətbiqimdir!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

App komponentini isə biz dəyişdirəcəyik. Başlamaq üçün onun məzmununu tamamilə silək. Sonra router üçün iki funksiyanı və bizim kök komponent Root-i import edək:

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

Aşağıda importdan sonra router yaradaq, və ilk marşrutu yazıb, ona bizim Root komponentini göstəriləcək element kimi ötürək və, müvafiq olaraq, yolu '/' kimi təyin edək. Sonradan App-ə biz lazım olan digər marşrutları da əlavə edəcəyik:

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

Aşağıda App funksiyasının kodunu yazaq:

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

export default App

Hamısı bitdi. İndi işə salaq. Növbəti bölmədə biz Redux tətbiqi üçün komponentləri həyata keçirəcəyik.

Sonda bir az gözəllik əlavə edək, bunun üçün index.css faylında stilləri yazaq:

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;
}