henryw374/tanstack-importmap-demo.js

## tanstack-importmap-demo.js
<!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/react@18.2.0",
    "react-dom/client": "https://esm.sh/react-dom@18.2.0",
     "@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>
	<!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/react@18.2.0",
	"react-dom/client": "https://esm.sh/react-dom@18.2.0",
	"@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>