1  Welcome to your new TanStack app! 
  2  
  3  # Getting Started
  4  
  5  To run this application:
  6  
  7  ```bash
  8  npm install
  9  npm run start
 10  ```
 11  
 12  # Building For Production
 13  
 14  To build this application for production:
 15  
 16  ```bash
 17  npm run build
 18  ```
 19  
 20  ## Styling
 21  
 22  This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
 23  
 24  
 25  
 26  ## Routing
 27  This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as fiels in `src/routes`.
 28  
 29  ### Adding A Route
 30  
 31  To add a new route to your application just add another a new file in the `./src/routes` directory.
 32  
 33  TanStack will automatically generate the content of the route file for you.
 34  
 35  Now that you have two routes you can use a `Link` component to navigate between them.
 36  
 37  ### Adding Links
 38  
 39  To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.
 40  
 41  ```tsx
 42  import { Link } from "@tanstack/solid-router";
 43  ```
 44  
 45  Then anywhere in your JSX you can use it like so:
 46  
 47  ```tsx
 48  <Link to="/about">About</Link>
 49  ```
 50  
 51  This will create a link that will navigate to the `/about` route.
 52  
 53  More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).
 54  
 55  ### Using A Layout
 56  
 57  In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
 58  
 59  Here is an example layout that includes a header:
 60  
 61  ```tsx
 62  import { Outlet, createRootRoute } from '@tanstack/solid-router'
 63  import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
 64  
 65  import { Link } from "@tanstack/solid-router";
 66  
 67  export const Route = createRootRoute({
 68    component: () => (
 69      <>
 70        <header>
 71          <nav>
 72            <Link to="/">Home</Link>
 73            <Link to="/about">About</Link>
 74          </nav>
 75        </header>
 76        <Outlet />
 77        <TanStackRouterDevtools />
 78      </>
 79    ),
 80  })
 81  ```
 82  
 83  The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
 84  
 85  More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
 86  
 87  ## Data Fetching
 88  
 89  There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
 90  
 91  For example:
 92  
 93  ```tsx
 94  const peopleRoute = createRoute({
 95    getParentRoute: () => rootRoute,
 96    path: "/people",
 97    loader: async () => {
 98      const response = await fetch("https://swapi.dev/api/people");
 99      return response.json() as Promise<{
100        results: {
101          name: string;
102        }[];
103      }>;
104    },
105    component: () => {
106      const data = peopleRoute.useLoaderData();
107      return (
108        <ul>
109          {data.results.map((person) => (
110            <li key={person.name}>{person.name}</li>
111          ))}
112        </ul>
113      );
114    },
115  });
116  ```
117  
118  Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).
119  
120  # Demo files
121  
122  Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
123  
124  
125  
126  # Learn More
127  
128  You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).