Usakinishaji wa React Router katika Programu ya Redux

Katika masomo yaliyopita tuliweka ala za kimsingi za kufanya kazi na Redux. Mara nyingi hufanyika hivi, kwamba programu inahitaji kiongozi wa njia za usafiri kwa ajili ya kutembelea kurasa zake za wavuti na programu yetu haitakuwa tofauti. Kwa hili tutaweka maktaba ya React Router.

Wacha tufungue mradi wetu na tuandike kwenye terminali amri ifuatayo:

terminalnpm install react-router-dom

Kukisia kidogo mbele, nitasema, kwamba programu yetu ya Redux kwa jadi imejikita kwenye bidhaa, ambazo habari zake zinachapishwa na wauzaji fulani. Kwa hivyo sasa tutabadilisha kidogo kipengele kuu App, na pia tuongeze kwenye programu utendakazi wa kutekeleza uongozi wa njia.

Kuanza, wacha tuingie kwenye folda src, kisha uingie app na uunde faili hapa root.jsx. Hii itakuwa mzizi wa tovuti yetu: upande wa kushoto tutakuwa na orodha ya menyu, na upande wa kulia - yaliyomo (kwa sasa tu tuna kichwa tu hapa):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Bidhaa</a>
          <a>Wauzaji</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>Hii ni programu yangu ya kwanza ya Redux!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

Na kipengele App tutakibadilisha. Kuanza kabisa tutaondoa yaliyomo yake. Kisha tutaingiza vitendaji viwili kwa ajili ya kiongozi wa njia na kipengele chetu cha mzizi Root:

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

Chini baada ya kuingiza tutaunda kiongozi wa njia, na kuandika njia ya kwanza, tukimpa Root wetu kama kipengele kinachoonyeshwa na, ipasavyo, tukiweka njia kuwa '/'. Baadaye kwenye App tutaongeza pia njia nyingine muhimu:

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

Chini tuandike msimbo wa kitendo App:

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

export default App

Yote. Tuanzishe. Katika sehemu inayofuata tutakuwa tunatekeleza vipengele kwa ajili ya kufanya kazi kwa programu ya Redux.

Mwishowe tuongeze urembo kidogo, tukiandika kwa ajili hiyo mitindo kwenye 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;
}