Додавање на рутер во React Router

Малку запознавајќи се со рутерите, можеме да додадеме еден од нив во апликацијата.

Но, прво треба малку да го исчистиме шаблонот на нашата апликација, кој го создадовме во претходните лекции. Поточно - ќе се занимаваме со папката src. Исфрлете ја од неа папката assets, датотеките App.css, App.jsx. Во принцип, во неа ќе ви останат само main.jsx и index.css.

Отворете ја index.css и целосно исчистете ја. Нека биде празна.

Сега да се занимаваме со нашата главна датотека main.jsx. Во неа ќе имаме ваков код:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

И сега можеме да додадеме рутер. Ќе користиме BrowserRouter, бидејќи најчесто се користи во веб-апликации. Да не заборавиме и на современиот синтакса. Да додадеме линија за импорт:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

Потоа, да направиме константа router и да го создадеме нашиот BrowserRouter после линиите со импорт. Да го направиме тоа така што на главната страница ќе се прикажува див со натпис 'Hello Router!'. За ова, да ја напишеме патеката до главната страница и елементот што ќе го прикажуваме:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Треба да додадеме и компонента RouterProvider и да го внесеме создадениот рутер погоре. Таа ги прифаќа сите објекти на рутерот, го рендерира нашето апликација и ги поврзува другите API:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Целосниот код ќе изгледа вака:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Да ги зачуваме промените. Честитки! Нашата апликација веќе не се жалува. Сега, ако ја пуштиме, на главната страница во прелистувачот ќе видиме 'Hello Router!'.

Користејќи го дадениот материјал, направете така што на главната страница на вашата апликација, која ја создадовте во домашните задачи за претходните лекции, да ви се прикажува параграф со текст 'I'm number one in React!'.