Juurmarsruudi loomine React Routeris

Sageli nimetatakse põhimarsruuti, mis viib avalehele, juurmarsruudiks (root route), kuna teised marsruudid renderdatakse selle sees. Väga mugav on kujutada seda eraldi komponendina. Seega võtame uuesti oma rakenduse ja kaustas src loome veel ühe ja nimetame selle routes. Nüüd loome selles kaustas faili root.jsx eraldi React komponendi Root jaoks. Kood failis näeb välja selline:

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

export default Root;

Ja nüüd teeme muudatusi faili main.jsx osas, kuna väärtusena element edastame nüüd komponendi Root, ja selle sisu asub nüüd eraldifailis root.jsx:

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

Ärgem unustagem importimise rida meie komponendiga failis main.jsx:

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