React Router installeren in een Redux applicatie

In de vorige lessen hebben we de belangrijkste hulpmiddelen voor het werken met Redux geïnstalleerd. Het is vaak zo dat een applicatie een router nodig heeft voor navigatie door zijn webpagina's en onze applicatie zal geen uitzondering zijn. Hiervoor installeren we de bibliotheek React Router.

Laten we ons project openen en in de terminal het volgende commando invoeren:

terminalnpm install react-router-dom

Even vooruitkijkend, zal ik zeggen dat onze Redux applicatie traditioneel gewijd is aan producten, waarvan de informatie wordt geplaatst door bepaalde verkopers. Daarom gaan we nu de hoofdcomponent App een beetje aanpassen, en ook functionaliteit toevoegen aan de applicatie voor het realiseren van routing.

Laten we eerst naar de map src gaan, en dan naar app en hier het bestand root.jsx aanmaken. Dit wordt de wortel van onze site: aan de linkerkant hebben we een menu, en aan de rechterkant - de inhoud (voorlopig hebben we hier alleen een titel):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Producten</a>
          <a>Verkopers</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>Dit is mijn eerste Redux app!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

En de component App gaan we aanpassen. Laten we eerst de inhoud volledig verwijderen. Vervolgens importeren we twee functies voor de router en onze wortelcomponent Root:

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

Hieronder na de import maken we de router aan, en beschrijven we de eerste route, waarbij we onze Root doorgeven als weer te geven element en, dienovereenkomstig, het pad instellen op '/'. In de toekomst zullen we in App ook andere benodigde routes toevoegen:

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

Hieronder schrijven we de code voor de functie App:

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

export default App

Klaar. We starten de applicatie. In het volgende deel gaan we componenten implementeren voor het werken van de Redux applicatie.

Tot slot voegen we een beetje schoonheid toe, door stijlen te beschrijven in 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;
}