-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
start tanstack router experimentation
- Loading branch information
Showing
5 changed files
with
245 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,133 @@ | ||
import { | ||
createMemoryHistory, | ||
createRootRoute, | ||
createRoute, | ||
createRouter, | ||
Link as RouterLink, | ||
Outlet, | ||
RouterProvider, | ||
useLocation, | ||
} from "@tanstack/react-router"; | ||
import { TanStackRouterDevtools } from "@tanstack/router-devtools"; | ||
import React, { ComponentPropsWithRef } from "react"; | ||
|
||
// import { systemLogger } from "../../../functions/utilities"; | ||
|
||
function stopPropagation(e: React.MouseEvent<"a", MouseEvent>) { | ||
e.stopPropagation(); | ||
} | ||
|
||
function preventDefault(e: React.MouseEvent<HTMLElement>) { | ||
e.preventDefault(); | ||
} | ||
|
||
/** | ||
* Custom version of Link component that stops propagation so | ||
* that whatever weird link handler Foundry has doesn't get triggered. | ||
*/ | ||
function Link(props: ComponentPropsWithRef<typeof RouterLink>) { | ||
return <RouterLink {...props} onClick={stopPropagation} />; | ||
} | ||
|
||
const history = createMemoryHistory({ | ||
initialEntries: ["/"], | ||
}); | ||
|
||
const RootComponent = () => { | ||
const loc = useLocation(); | ||
return ( | ||
<> | ||
<div> | ||
<Link to="/" className="[&.active]:font-bold"> | ||
Home | ||
</Link>{" "} | ||
<Link to="/about" className="[&.active]:font-bold"> | ||
About | ||
</Link>{" "} | ||
<Link to="/people" className="[&.active]:font-bold"> | ||
People | ||
</Link>{" "} | ||
{loc.href} | ||
</div> | ||
<hr /> | ||
<Outlet /> | ||
<TanStackRouterDevtools /> | ||
</> | ||
); | ||
}; | ||
|
||
const rootRoute = createRootRoute({ | ||
component: RootComponent, | ||
}); | ||
|
||
const indexRoute = createRoute({ | ||
getParentRoute: () => rootRoute, | ||
path: "/", | ||
component: function Index() { | ||
return ( | ||
<div className="p-2"> | ||
<h3>Welcome Home!</h3> | ||
</div> | ||
); | ||
}, | ||
}); | ||
|
||
const aboutRoute = createRoute({ | ||
getParentRoute: () => rootRoute, | ||
path: "/about", | ||
component: function About() { | ||
return ( | ||
<div className="p-2"> | ||
Hello from About! | ||
<Link to="/">I wanna go home!</Link> | ||
<Link to="people">People</Link> | ||
</div> | ||
); | ||
}, | ||
}); | ||
|
||
const peopleRoute = createRoute({ | ||
getParentRoute: () => rootRoute, | ||
path: "/about/people", | ||
component: function About() { | ||
return ( | ||
<div className="p-2"> | ||
Our team! | ||
<ul> | ||
<li> | ||
<Link to="ndc">Neil de Carteret</Link> | ||
</li> | ||
<li> | ||
<Link to="people/fred">Fred</Link> | ||
</li> | ||
</ul> | ||
</div> | ||
); | ||
}, | ||
}); | ||
|
||
const routeTree = rootRoute.addChildren([indexRoute, aboutRoute, peopleRoute]); | ||
|
||
const router = createRouter({ routeTree, history }); | ||
|
||
declare module "@tanstack/react-router" { | ||
interface Register { | ||
router: typeof router; | ||
} | ||
} | ||
|
||
// my component | ||
|
||
interface RouterExperimentProps {} | ||
|
||
export const RouterExperiment: React.FC<RouterExperimentProps> = () => { | ||
return ( | ||
// preventDefault here blocks clicks on router dev tools from tgriggering | ||
// foundry's own click handlers. | ||
<div onClick={preventDefault}> | ||
<RouterProvider router={router} basepath="/" /> | ||
</div> | ||
); | ||
}; | ||
|
||
RouterExperiment.displayName = "RouterExperiment"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters