tomas
/
todo-list
1
0
Fork 0
Code

Use react-router

This commit is contained in:
Tomas Balsys 2024-10-26 12:50:01 +03:00
parent 050fa16aaf
commit 18a66cdca1
6 changed files with 76 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -8,7 +8,7 @@
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
</head> </head>
<body class="m-0 min-h-screen flex place-items-center"> <body class="m-0 min-h-screen">
<div id="root" class="my-0 mx-auto"></div> <div id="root" class="my-0 mx-auto"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>

17
src/error-page.tsx Normal file
View File

@ -0,0 +1,17 @@
import { useRouteError } from "react-router-dom";
export default function ErrorPage() {
const error = useRouteError() as {
status?: number,
statusText?: string,
message?: string,
};
console.error(error);
return (
<div>
<h1>{error.status} {error.statusText || error.message}</h1>
<p><i>Atsiprašome, įvyko nenumatyta klaida.</i></p>
</div>
);
}

15
src/index.css
View File

@ -2,6 +2,21 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base {
h1 {
@apply text-2xl my-5;
}
p,
li {
@apply my-4;
}
a.nav-button {
@apply bg-neutral-100 dark:bg-neutral-900 cursor-pointer px-5 py-2 rounded-lg border border-transparent hover:border-indigo-500 transition-colors duration-1000;
}
}
:root { :root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
color-scheme: light dark; color-scheme: light dark;

28
src/main.tsx
View File

@ -1,10 +1,34 @@
import { StrictMode } from 'react' import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
import './index.css' import './index.css'
import App from './App.tsx' import List from './routes/list.tsx'
import Root from './routes/root.tsx'
import ErrorPage from './error-page.tsx';
const router = createBrowserRouter([
{
path: "/",
element: <Root />,
errorElement: <ErrorPage />,
children: [
{
path: "/list",
element: <List />,
},
{
path: "/fetch",
element: <div/>,
},
],
},
]);
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>
<App /> <RouterProvider router={router} />
</StrictMode>, </StrictMode>,
) )

0
src/App.tsx → src/routes/list.tsx
View File

17
src/routes/root.tsx Normal file
View File

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