React Router-da Kök Marşrutun Yaradılması

Tez-tez əsas səhifəyə aparan əsas marşrut kök marşrut adlanır (root route), çünki digər marşrutlar onun daxilində render olunacaq. Onı ayrı bir komponent kimi təqdim etmək çox rahatdır. Buna görə gəlin təkrarən bizim tətbiqimizi götürək və src qovluğunda bir dənə daha yaradaq və onun adını routes qoyaq. İndi bu qovluqda ayrı bir React komponenti Root üçün root.jsx faylı yaradaq. Fayldakı kod belə görünəcək:

routes/root.jsxfunction Root() {
  return <div>Salam Router!</div>;
}

export default Root;

İndi gəlin main.jsx faylının bir hissəsində dəyişikliklər edək, çünki indi biz element dəyəri kimi Root komponentini ötürəcəyik, və onun məzmunu indi ayrı bir root.jsx faylındadır:

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

main.jsx faylında bizim komponentlə olan import sətrini unutmayaq:

main.jsximport Root from './routes/root';