Creating a Root Route in React Router

Often the main route that leads to the home page is called the root route, since other routes will be rendered inside it. It is very convenient to think of it as a separate component. So let's take our app again and in the src folder create another one and call it routes. Now, in this folder, create a file root.jsx for a separate React component Root. The code in the file will look like this:

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

export default Root;

Now let's make a change to the code snippet in the main.jsx file, since we will now be passing the Root component as the value of element, and its contents are now in a separate file root.jsx:

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

Let's not forget the import line with our component in main.jsx:

import Root from './routes/root';

Open the app you created in the previous lessons. Create a separate React component for the root route Root in a separate file root.jsx, as described in this lesson. Make changes to your main.jsx.