Сохтани маршрути реша дар React Router

Аксар вақт маршрути асосӣ, ки ба саҳифаи асосӣ мебарад, маршрути реша (root route) номида мешавад, зеро маршрутҳои дигар дар дохили он рендер карда мешаванд. Тасаввур кардани он ҳамчун як компоненти ҷудогона хеле муосир аст. Аз ин рӯ, биёед барномаи худро боз гирем ва дар ҷузвдон src яктои дигар созем ва онро routes ном кунем. Акнун дар ин ҷузвон файли root.jsx-ро барои компоненти ҷудогонаи React Root месозем. Рамз дар файл ба ин шакл хоҳад буд:

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

export default Root;

Ва акнун биёед тағйиротҳоро дар порчаи рамзи файли main.jsx ворид кунем, зеро ҳамчун арзиши element мо акнун компоненти Root-ро мефиристем, ва мундариҷаи он акнун дар файли ҷудогонаи root.jsx ҷойгир аст:

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

Сатири воридкунии компоненти худро дар main.jsx фаромӯш накунем:

import Root from './routes/root';

Барномаеро, ки шумо дар вазифаҳои дарсҳои гузашта сохтаед, кушоед. Барои маршрути реша компоненти ҷудогонаи React Root дар файли ҷудогонаи root.jsx созед, тавре ки дар ин дарс тавсиф шудааст. Тағйиротҳоро дар main.jsx-и худ ворид кунед.