Skep van 'n Wortelroete in React Router

Die hoofroete wat na die tuisblad lei, word dikwels die wortelroete (root route) genoem, aangesien ander roetes binne dit gerender sal word. Dit is baie gerieflik om dit as 'n aparte komponent voor te stel. Laat ons dus weer ons toepassing neem en in die gids src 'n ander een skep en dit routes noem. Nou skep ons in hierdie gids die lêer root.jsx vir 'n aparte React-komponent Root. Die kode in die lêer sal so lyk:

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

export default Root;

En laat ons nou die veranderinge aanbring in die stukkie kode van die lêer main.jsx, aangesien ons nou die komponent Root as die waarde van element sal oorhandig, en sy inhoud is nou in 'n aparte lêer root.jsx:

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

Laat ons nie die invoerstring met ons komponent in main.jsx vergeet nie:

import Root from './routes/root';

Maak die toepassing oop wat jy in die opdragte vir vorige lesse geskep het. Skep vir die wortelroete 'n aparte React- komponent Root in 'n aparte lêer root.jsx, soos beskryf in hierdie les. Bring die veranderinge in jou main.jsx aan.