Installera React Router i ett Redux-program

På tidigare lektioner har vi installerat de grundläggande verktygen för att arbeta med Redux. Det händer ofta att en applikation behöver en router för navigering mellan dess webbsidor och vår applikation kommer inte att vara något undantag. För detta kommer vi att installera biblioteket React Router.

Låt oss öppna vårt projekt och skriva följande kommando i terminalen:

npm install react-router-dom

Om vi ser lite framåt så kommer vår Redux-applikation traditionellt att handla om produkter, information om vilka läggs ut av några säljare. Därför kommer vi nu att göra om huvudkomponenten App lite grann, och också lägga till funktionalitet i applikationen för att möjliggöra routing.

Låt oss först gå in i mappen src, och sedan in i app och skapa filen root.jsx här. Detta kommer att vara roten till vår webbplats: till vänster kommer vi att ha en meny, och till höger - innehåll (just nu har vi bara en rubrik här):

function 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

Och komponenten App kommer vi att ändra på. Låt oss först ta bort allt dess innehåll. Sedan importerar vi två funktioner för routern och vår rotkomponent Root:

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

Längre ner efter importen skapar vi routern, och skriver in den första rutten, och skickar den vår Root som element att rendera och, följaktligen, sätter sökvägen till '/'. Senare kommer vi att lägga till andra nödvändiga rutter i App:

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

Längre ner skriver vi koden för funktionen App:

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

export default App

Klart. Vi startar. I nästa avsnitt kommer vi att implementera komponenter för att få Redux-applikationen att fungera.

Till sist lägger vi till lite skönhet genom att skriva stilar för detta i index.css:

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

Lägg till React Router i din applikation.

Låt din applikation handla om studenter, information om vilka kommer att läggas ut av lärare. Med hänsyn till detta, skapa en rotkomponent Root. Gör om komponenten App som beskrivs i lektionen.