React Router-ის დაყენება Redux აპლიკაციაში

წინა გაკვეთილებზე ჩვენ დავაყენეთ ძირითადი ინსტრუმენტები Redux-თან მუშაობისთვის. ხშირად ხდება ისე, რომ აპლიკაციას სჭირდება მარშრუტიზატორი ნავიგაციისთვის მის ვებ-გვერდებზე და ჩვენი აპლიკაცია გამონაკლისი არ იქნება. ამისთვის ჩვენ დავაყენებთ ბიბლიოთეკას React Router.

გავხსნათ ჩვენი პროექტი და ტერმინალში აკრიფოთ შემდეგი ბრძანება:

terminalnpm install react-router-dom

ცოტა წინასწარ ვიხევთ, ვიტყვი, რომ ჩვენი Redux აპლიკაცია ტრადიციულად ეძღვნება პროდუქტებს, მათ შესახებ ინფორმაციას, რომელსაც გარკვეული გამყიდველები აქვეყნებენ. ამიტომ ახლა ჩვენ ცოტა შევცვლით მთავარ კომპონენტს App, და ასევე დავამატებთ აპლიკაციაში ფუნქციონალს მარშრუტიზაციის განსახორციელებლად.

დასაწყისისთვის შევიდეთ საქაღალდეში src, შემდეგ app-ში და აქ შევქმნათ ფაილი root.jsx. ეს იქნება ჩვენი საიტის ფესვი: მარცხნივ გვექნება მენიუ, მარჯვნივ - კონტენტი (ამჟამად კი ჩვენ აქ გვაქვს მხოლოდ სათაური):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Products</a>
          <a>Sellers</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>This is my first Redux app!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

ხოლო კომპონენტს App ჩვენ შევცვლით. დასაწყისისთვის მთლიანად ამოვშლათ მისი შიგთავსი. შემდეგ იმპორტი გავაკეთოთ ორი ფუნქციისთვის როუტერისთვის და ჩვენი ძირეული კომპონენტისთვის Root:

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

ქვემოთ იმპორტის შემდეგ შევქმნათ როუტერი, და დავწეროთ პირველი მარშრუტი, მივანიჭოთ მას ჩვენი Root, როგორც გამოსახული ელემენტი და, შესაბამისად, დავაყენოთ გზა '/'-ზე. შემდგომში App-ში ჩვენ დავამატებთ სხვა საჭირო მარშრუტებსაც:

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

ქვემოთ დავწეროთ კოდი ფუნქციისთვის App:

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

export default App

ყველაფერი. ვუშვებთ. შემდეგ ნაწილში ჩვენ განვახორციელებთ კომპონენტებს Redux აპლიკაციის მუშაობისთვის.

დასასრულს დავამატოთ ცოტა სილამაზე, ამისთვის დავწეროთ სტილები 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;
}