Named exports

src/error-page.tsx

@@ -1,6 +1,6 @@
 import { useRouteError } from "react-router-dom";
 
-export default function ErrorPage() {
+export function ErrorPage() {
   const error = useRouteError() as {
     status?: number,
     statusText?: string,

src/main.tsx

@@ -5,9 +5,9 @@ import {
   RouterProvider,
 } from "react-router-dom";
 import './index.css'
-import List from './routes/list.tsx'
-import Root from './routes/root.tsx'
-import ErrorPage from './error-page.tsx';
+import { List } from './routes/list.tsx'
+import { Root } from './routes/root.tsx'
+import { ErrorPage } from './error-page.tsx';
 
 const router = createBrowserRouter([
   {

src/routes/list.tsx

@@ -3,7 +3,7 @@ import { AccordionItem } from '../components/accordion-item';
 import { TaskTable } from '../components/task-table';
 import { TaskForm } from '../components/task-form';
 
-function App() {
+export function List () {
   const [tasks, setTasks] = useState<TodoTasks>([
     {
       id: 1,
@@ -75,5 +75,3 @@ function App() {
     </>
   )
 }
-
-export default App

src/routes/root.tsx

@@ -1,6 +1,6 @@
 import { Outlet, Link } from "react-router-dom";
 
-export default function Root() {
+export function Root() {
   return (
     <>
       <nav className="mx-auto flex items-center justify-center gap-x-5 py-6 px-8">
@@ -8,7 +8,7 @@ export default function Root() {
         <Link to={`/fetch`} className="nav-button">Duomenys</Link>
       </nav>
       <main className="my-10">
-          <Outlet />
+        <Outlet />
       </main>
     </>
   );