React Router-installasie in 'n Redux-toepassing

Op vorige lesse het ons die hoofinstrumente vir werk met Redux geïnstalleer. Dikwels gebeur dit dat 'n toepassing 'n router benodig vir navigasie tussen die webbladsye, en ons toepassing sal geen uitsondering wees nie. Vir hierdie doel sal ons die React Router-biblioteek installeer.

Laat ons ons projek oopmaak en die volgende opdrag in die terminal intik:

npm install react-router-dom

Om effens vooruit te spring, sal ek sê dat ons Redux-toepassing tradisioneel gewy is aan produkte waaroor inligting deur sekere verkopers geplaas word. Daarom sal ons nou die hoofkomponent App effens oorskryf, en ook funksionaliteit by die toepassing voeg om roetebepaling te bewerkstellig.

Om te begin, laat ons na die vouer src gaan, en dan na app en hierdie lêer root.jsx skep. Dit sal die wortel van ons webwerf wees: aan die linkerkant sal ons 'n spyskaart hê, en aan die regterkant - die inhoud (vir nou het ons hier slegs 'n opskrif):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Produkte</a>
					<a>Verkopers</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>Dit is my eerste Redux-toepassing!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

En ons sal die komponent App oorskryf. Om te begin, laat ons al die inhoud daarvan verwyder. Dan voer ons twee funksies vir die router en ons wortelkomponent Root in:

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

Laag na die invoer skep ons 'n router, en skryf die eerste roete, deur ons Root as die vertoonde element daaraan oor te dra en, ooreenkomstig, die pad na '/' te stel. In die toekoms sal ons in App ander nodige roetes byvoeg:

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

Laag onder skryf ons die kode van die funksie App:

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

export default App

Klaar. Laat ons dit begin. In die volgende afdeling sal ons komponente vir die werking van die Redux-toepassing implementeer.

Laastens, laat ons 'n bietjie skoonheid byvoeg deur hiervoor style in index.css te skryf:

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

Voeg React Router by jou toepassing.

Laat jou toepassing oor studente handel, waaroor inligting deur dosente geplaas sal word. Met dit in ag, skep die wortelkomponent Root. Herskryf die komponent App soos beskryf in die les.