Byvoeging van 'n roeteerder in React Router

Nadat ons 'n bietjie kennis gemaak het met roeteerders, kan ons een daarvan by die toepassing voeg.

Maar eers moet ons die sjabloon van ons toepassing, wat ons in vorige lesse geskep het, 'n bietjie skoonmaak. Om presies te wees - ons sal ons met die src vouer besig hou. Gooi die assets vouer, die lêers App.css, App.jsx uit. In die algemeen, sal net main.jsx en index.css oorbly.

Maak index.css oop en maak dit heeltemal skoon. Laat dit leeg wees.

Kom ons neem nou ons hoof lêer main.jsx. Daarin sal ons die volgende kode hê:

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

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

	</React.StrictMode>
);

En nou kan ons die roeteerder byvoeg. Ons sal BrowserRouter gebruik, aangesien dit die meeste in webtoepassings gebruik word. Ons moet ook die moderne sintaksis onthou. Laat ons die invoer reël byvoeg:

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

Daarna, laat ons die konstante router skep en ons BrowserRouter na die invoer reëls skep. Doen dit sodat op die hoofblad vir ons 'n div met die opskrif 'Hello Router!' vertoon word. Om dit te doen, laat ons die pad na die hoofblad spesifiseer en die element wat ons wil vertoon:

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

Ons moet ook die komponent RouterProvider byvoeg en die roeteerder wat ons hierbo geskep het, daarin plaas. Dit neem al die roeteerder objekte, vertoon ons toepassing en koppel ander API's:

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

Die volledige kode sal so lyk:

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

Laat ons die veranderinge stoor. Baie geluk! Ons toepassing kla nie meer nie. As ons dit nou uitvoer, sal ons op die hoofblad in die blaaier 'Hello Router!' sien.

Gebruik die aangebiede materiaal, maak dit so dat op die hoofblad van jou toepassing, wat jy geskep het in die huiswerk vir vorige lesse, 'n paragraaf met die teks 'I'm number one in React!' vertoon word.