| Welcome to your curriculum

Goal

Use TanStack/React Router to create a multi-page TodoList app with routes for:

Viewing the main Todo list.
Accessing the AI-powered features.
Navigating between pages seamlessly.

1. Learning Objectives

By the end of this lesson, students will:

Understand the advantages of TanStack/React Router over traditional React Router.
Configure a basic routing system.
Build multiple pages (views) and connect them with navigation links.
Implement nested routes for better app structure.

2. Why TanStack/React Router?

Benefits:

Modern Features: Better route management with loaders, error boundaries, and lazy-loading support.
Performance: Optimized rendering with fewer re-renders.
Declarative API: Cleaner route definitions and easier navigation setup.

3. Install TanStack/React Router

Run the following command:

npm install @tanstack/react-router

4. Setting Up Routes

We’ll create routes for:

Home Page → Displays the Todo list.
AI Tools Page → Integrates AI-powered features.

4.1. Define Routes

Create a routes file.

File: src/routes.tsx

import { createBrowserRouter } from '@tanstack/react-router';
import App from './App';
import TodoPage from './pages/TodoPage';
import AiToolsPage from './pages/AiToolsPage';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      { path: '/', element: <TodoPage /> },
      { path: '/ai-tools', element: <AiToolsPage /> },
    ],
  },
]);

export default router;

4.2. Create Page Components

TodoPage: Displays the main Todo list.

File: src/pages/TodoPage.tsx

import React from 'react';
import AddTodo from '../components/AddTodo';
import TodoList from '../components/TodoList';

const TodoPage: React.FC = () => {
  return (
    <div>
      <h2>Todo List</h2>
      <AddTodo />
      <TodoList />
    </div>
  );
};

export default TodoPage;

AiToolsPage: Displays the AI tools (description, schedule, and subtasks).

File: src/pages/AiToolsPage.tsx

import React, { useState } from 'react';
import axios from 'axios';

const AiToolsPage: React.FC = () => {
  const [task, setTask] = useState('');
  const [description, setDescription] = useState('');

  const generateDescription = async () => {
    const { data } = await axios.post('http://localhost:5000/api/ai/description', { task });
    setDescription(data.description);
  };

  return (
    <div>
      <h2>AI Tools</h2>
      <input
        type="text"
        placeholder="Enter a task"
        value={task}
        onChange={(e) => setTask(e.target.value)}
      />
      <button onClick={generateDescription}>Generate Description</button>
      {description && <p><strong>Description:</strong> {description}</p>}
    </div>
  );
};

export default AiToolsPage;

Modify src/App.tsx to include navigation links and a layout for nested routes.

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

const App: React.FC = () => {
  return (
    <div>
      <nav>
        <ul style={{ display: 'flex', gap: '1rem' }}>
          <li><Link to="/">Todo List</Link></li>
          <li><Link to="/ai-tools">AI Tools</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Renders nested routes */}
    </div>
  );
};

export default App;

4.4. Connect Router to Your App

Update src/index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from '@tanstack/react-router';
import router from './routes';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <RouterProvider router={router} />
);

5. Running the Frontend

Start the backend server if not already running:

cd backend
npm run dev

Start the React frontend:

cd frontend
npm start

Open http://localhost:3000 in the browser.
Confirm the following:
- The Home Page displays the Todo list.
- Clicking on AI Tools navigates to the AI-powered features page.
- The navigation links are visible and functional.

7. Homework Assignment

Add nested routes under /ai-tools for:
- Generate Schedule
- Generate Subtasks
Implement the Generate Schedule API call and display the response.
Style the navigation bar using Radix UI components.

Next Lesson Preview: Lesson 9

In Lesson 9, we will:

Explore Radix UI in more detail to style the app.
Add icons with Phosphor Icons for improved UI/UX.

Lesson 8: Setting Up Navigation with TanStack/React Router