React Routeri installimine Redux rakendusse

Eelmistel tundidel installisime põhivahendid Reduxiga töötamiseks. Sageli juhtub nii, et rakendus vajab marsruuterit veebilehtede vahel navigeerimiseks ja meie rakendus ei ole erand. Selleks installime teegi React Router.

Avame oma projekti ja sisestame terminali järgmise käsu:

terminalnpm install react-router-dom

Natuke ette jõudes ütlen, et meie Redux rakendus on traditsiooniliselt pühendatud toodetele, mille kohta info postitatakse mõne müüja poolt. Seetõttu muudame nüüd veidi peamist komponenti App, ning lisame rakendusele marsruutimise funktsionaalsuse.

Alustuseks läheme kausta src, seejärel kausta app ja loome siia faili root.jsx. See on meie saidi juur: vasakul on meil menüü, ja paremal - sisu (praegu on meil siin ainult pealkiri):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Tooted</a>
          <a>Müüjad</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>See on minu esimene Redux rakendus!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

Ja komponenti App me ümber teeme. Alustuseks kustutame täielikult selle sisu. Seejärel impordime kaks funktsiooni ruuteri jaoks ja meie juurkomponendi Root:

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

Allpool impordi järel loome ruuteri, ja kirjutame esimese marsruudi, andes sellele meie Root kuvatava elemendina ja vastavalt seades tee väärtuseks '/'. Edaspidi lisame App ka muid vajalikke marsruute:

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

Allpool kirjutame funktsiooni App koodi:

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

export default App

Kõik. Käivitame. Järgmises osas hakkame realiseerima Redux rakenduse jaoks vajalikke komponente.

Lõpetuseks lisame veidi ilu, kirjutades selle jaoks stiilid faili 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;
}