Saknes maršruta izveide React Router

Bieži vien galveno maršrutu, kas ved uz mājas lapu, sauc par saknes maršrutu (root route), jo citi maršruti tiks renderēti tā iekšienē. Ir ļoti ērti to attēlot kā atsevišķu komponentu. Tāpēc vēlreiz paņemsim mūsu lietotni un mapē src izveidosim vēl vienu un nosauksim to par routes. Tagad šajā mapē izveidosim failu root.jsx atsevišķam React komponentam Root. Kods failā izskatīsies šādi:

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

export default Root;

Un tagad veiksim izmaiņas faila main.jsx koda daļā, jo kā element vērtību mēs tagad padodam komponentu Root, un tā saturs tagad atrodas atsevišķā failā root.jsx:

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

Neaizmirsīsim importa rindu ar mūsu komponentu main.jsx:

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