Setting Up TanStack Router

Demonstrate how to install TanStack Router and configure a basic routing setup in a React application, including defining a home route and a about route.

npm install @tanstack/react-location

Install TanStack Router using npm. Run this command in your project's root directory.

import { ReactLocation, Router } from '@tanstack/react-location';
import React from 'react';
import { createRoot } from 'react-dom/client';
import Home from './Home';
import About from './About';

// Create a new instance of ReactLocation
const location = new ReactLocation();

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

function App() {
  return (
    <Router location={location} routes={routes} />
  );
}

// Assuming you have a div with id 'root' in your index.html
const root = createRoot(document.getElementById('root'));
root.render(<App />);

This code snippet demonstrates how to set up TanStack Router in a React application. It imports required modules from TanStack React Location, defines routes for 'Home' and 'About', and sets up the router within the 'App' component. Finally, it mounts the 'App' component to the DOM.