Created
November 7, 2023 16:50
-
-
Save henryw374/a7e5c369a2f7b3020c4f27637349314d to your computer and use it in GitHub Desktop.
tanstack react-router no build step
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>demo</title> | |
| </head> | |
| <body> | |
| <div id="app" style="min-height:100%"> | |
| Hello world! | |
| </div> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "react": "https://esm.sh/[email protected]", | |
| "react-dom/client": "https://esm.sh/[email protected]", | |
| "@tanstack/react-router": "https://esm.sh/@tanstack/react-router" | |
| } | |
| } | |
| </script> | |
| <script type="module"> | |
| import React, { StrictMode } from 'react' | |
| import ReactDOM from 'react-dom/client' | |
| import { | |
| Outlet, | |
| RouterProvider, | |
| Link, | |
| Router, | |
| Route, | |
| RootRoute, | |
| } from '@tanstack/react-router' | |
| // Create a root route | |
| const rootRoute = new RootRoute({ | |
| component: Root, | |
| }) | |
| function Root() { | |
| return React.createElement('div', {}, | |
| React.createElement(Link, {to: "/"}, "Home"), | |
| React.createElement('div', {}), | |
| React.createElement(Link, {to: "/about"}, "About"), | |
| React.createElement('hr', {}), | |
| React.createElement(Outlet, {}) | |
| ); | |
| } | |
| // Create an index route | |
| const indexRoute = new Route({ | |
| getParentRoute: () => rootRoute, | |
| path: '/', | |
| component: Index, | |
| }) | |
| function Index() { | |
| return React.createElement('div', {}, "This in the Index page") | |
| } | |
| const aboutRoute = new Route({ | |
| getParentRoute: () => rootRoute, | |
| path: '/about', | |
| component: About, | |
| }) | |
| function About() { | |
| return React.createElement('div', {}, "This is the About page") | |
| } | |
| // Create the route tree using your routes | |
| const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]) | |
| // Create the router using your route tree | |
| const router = new Router({ routeTree }); | |
| // Render our app! | |
| const rootElement = document.getElementById('app'); | |
| const root = ReactDOM.createRoot(rootElement) | |
| root.render( | |
| React.createElement(StrictMode, {}, | |
| React.createElement(RouterProvider, {router}, "About") | |
| ) | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment