Роути индекси дар React Router

Дар ин дарс мо мефаҳмем, ки роутҳои индексӣ чист.

Барои оғоз биёед ба як чиз диққат диҳем. Вақте ки мо дар саҳифаи асосӣ ҳастем, дар тарафи рост мо танҳо экрани холӣ мебинем. Ин аз он сабаб аст, ки ягон яке аз роутҳои фарзанд ба суроғаи / мувофиқат намекунад, ва мо нагуфтаем, ки дар ин ҳолат чӣ чизро нишон диҳем. Дар чунин ҳолат, то саҳифаи холӣ нишон дода нашавад, метавон роути индекси-ро истифода бурд - ин роути фарзанд аст, ки роҳ надорад, ва унсури он дар Outlet-и волидайн намоиш дода мешавад, вақте ки ягон яке аз роутҳои фарзанд мувофиқат намекунад. Бо ёрии чунин роутҳо шумо метавонед баъзе маълумотҳо, ё омор, ё чизҳои дигарро ҷойгир кунед. Ҳамчунон дар ҳолати оддӣ онҳоро барои бор кардани маълумот истифода бурдан мумкин аст.

Биёед файли index.jsx-ро эҷод кунем дар ҷузвдон routes, ва дар он компоненти Index-ро эҷод кунем:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>Салом, React Router!</p>
      <p>Ин барнома барои маҳсулоти ман аст :)</p>
    </div>
  );
}

Ҳозир биёед ба main.jsx гузарем ва он ҷо компоненти худро Index-ро ворид кунем:

main.jsximport Index from './routes/index';

Ва унсури якум дар массиви children объектеро илова кунем, ки дар он хосияти index ба true таъин шудааст, ва ҳамчун унсур барои намоиш компоненти мо Index хоҳад буд:

main.jsx{ index: true, element: <Index /> },