eisterman/tanstack-address-book
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More equal standing moving the sidebar directly inside the RootRoute component

Browse Source
This commit is contained in:
Federico Pasqua
2025-03-30 20:54:53 +02:00
parent 584ced1cd5
commit 792bb27d06
2 changed files with 30 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/routes/__root.tsx
View File

@@ -1,10 +1,37 @@
import { Outlet, createRootRoute } from '@tanstack/react-router'; import { createRootRoute } from '@tanstack/react-router';
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'; import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
export const Route = createRootRoute({ export const Route = createRootRoute({
component: () => ( component: () => (
<> <>
<Outlet/> <div id="sidebar">
<h1>React Router Contacts</h1>
<div>
<form id="search-form" role="search">
<input
aria-label="Search contacts"
id="q"
name="q"
placeholder="Search"
type="search"
/>
<div aria-hidden hidden={true} id="search-spinner"/>
</form>
<form method="post">
<button type="submit">New</button>
</form>
</div>
<nav>
<ul>
<li>
<a href={`/contacts/1`}>Your Name</a>
</li>
<li>
<a href={`/contacts/2`}>Your Friend</a>
</li>
</ul>
</nav>
</div>
<TanStackRouterDevtools/> <TanStackRouterDevtools/>
</> </>
), ),

31
src/routes/index.tsx
View File

@@ -7,35 +7,6 @@ export const Route = createFileRoute('/')({
function App() { function App() {
return ( return (
<> <div></div>
<div id="sidebar">
<h1>React Router Contacts</h1>
<div>
<form id="search-form" role="search">
<input
aria-label="Search contacts"
id="q"
name="q"
placeholder="Search"
type="search"
/>
<div aria-hidden hidden={true} id="search-spinner"/>
</form>
<form method="post">
<button type="submit">New</button>
</form>
</div>
<nav>
<ul>
<li>
<a href={`/contacts/1`}>Your Name</a>
</li>
<li>
<a href={`/contacts/2`}>Your Friend</a>
</li>
</ul>
</nav>
</div>
</>
); );
} }