simple-todos-react's Introduction

Using Tanstack Router with Meteor

Install these packages:
- @tanstack/react-router
- @tanstack/router-devtools
- @tanstack/router-cli
Create a script to generate file based routes: tsr watch
Add the config file:

{
  "routesDirectory": "./imports/routes",
  "generatedRouteTree": "./imports/routeTree.gen.ts",
  "routeFileIgnorePrefix": "-",
  "quoteStyle": "double"
}

Create the router

import React from 'react';
import { RouterProvider, createRouter } from '@tanstack/react-router';
import { Meteor } from 'meteor/meteor';
import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';

// Import the generated route tree
import { routeTree } from '../imports/routeTree.gen';

// Create a new router instance
const router = createRouter({ routeTree })

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}
Meteor.startup(() => {
  // Render the app
  const rootElement = document.getElementById('react-target')!
  if (!rootElement.innerHTML) {
    const root = ReactDOM.createRoot(rootElement)
    root.render(
      <StrictMode>
        <RouterProvider router={router} />
      </StrictMode>,
    )
  }
});

Create a __root.tsx file as an entry point

import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
import { TanStackRouterDevtools } from '@tanstack/router-devtools';
import React from 'react';

export const Route = createRootRoute({
	component: () => (
    <>
			<div>
      <h1>Welcome to Meteor!</h1>
      <Link to="/hello">Link to hello page</Link>
			<Link to="/info">Link to info page</Link>
    </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})