Installing and Setting Up TanStack Router

Demonstrate the initial steps to install TanStack Router in a JavaScript project using npm or yarn, and show a basic setup example.

// Installing TanStack Router using npm
npm install @tanstack/react-location

This command installs the TanStack Router package via npm, making it available in your project.

// Alternatively, installing TanStack Router using yarn
yarn add @tanstack/react-location

This command installs the TanStack Router package via yarn for projects that use yarn as package manager.

import { RouterProvider, createMemoryRouter } from '@tanstack/react-location';
import HomePage from './HomePage';

// Define your routes
const routes = [
  { path: '/', element: <HomePage /> },
];

// Create a router instance
const router = createMemoryRouter(routes);

function App() {
  return (
    <RouterProvider router={router}>
      {/* Application components go here */}
    </RouterProvider>
  );
}

This code snippet demonstrates how to set up the TanStack Router in a project. It imports the necessary components from the package, defines a simple route, creates a router instance using those routes, and finally integrates the router with the app's component structure.