React Router-da esasy ýol döretmek

Köplenç, esas sahypa getirýän esasy ýola esasy (root route) ýol diýilýär, sebäbi beýleki ýollar onuň içinde renderlenjek. Ony aýratyn komponent hökmünde görkezmek örän amatly. Şonuň üçin geliň ýene-de biziň aplikasiýamyzy alyp, src papkasynyň içinde ýene birini döredeliň we ona routes diýeliň. Indi bu papkada aýratyn React komponenti Root üçin root.jsx faýlyny döredeliň. Faýldaky kod şeýle görüner:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

Indi geliň main.jsx faýlynyň bir bölegine üýtgeşiklik girizeliň, sebäbi element bahasy hökmünde indi biz Root komponentini geçireris, onuň mazmuny bolsa indi aýratyn root.jsx faýlynda ýerleşýär:

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

main.jsx-da biziň komponentimizi import etmek üçin setiri ýatdan çykarmaly däl:

import Root from './routes/root';

Öňki sapaklaryň wezipelerinde döreden aplikasiýaňyzy açyň. Esasy ýol üçin aýratyn React komponenti Root-ny bu sapakda düşürilşi ýaly aýratyn root.jsx faýlynda dörediň. main.jsx faýlyňyza üýtgeşiklik giriziň.