Docs: createFileRoute API seems to have changed

[Floriferous]

Which project does this relate to?

Router

Describe the bug

In this chapter, it says The createFileRoute function takes a single argument, the file-route's path as a string., yet the example just above shows the following code:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute({
  component: PostsComponent,
})

Probably that the argument to createFileRoute has changed, but the example is wrong, or the text is wrong?

The API page for this same function also has conflicting text and examples: https://tanstack.com/router/latest/docs/framework/react/api/router/createFileRouteFunction

Your Example Website or App

https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#anatomy-of-a-route

Steps to Reproduce the Bug or Issue

Go to docs, get confused.

Expected behavior

Do not get confused.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[Floriferous]

This seems like a more general issue across the docs, the following chapter has a similar issue: https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#index-routes

// posts.index.tsx
import { createFileRoute } from '@tanstack/react-router'

// Note the trailing slash, which is used to target index routes
export const Route = createFileRoute({
  component: PostsIndexComponent,
})

function PostsIndexComponent() {
  return <div>Please select a post!</div>
}

There is no more trailing slash as mentioned in the comment about the code example.

[schiller-manuel]

we have added an option which makes it possible to use createFileRoute without the route id strings. we still need to document this; it's called verboseFileRoutes and it defaults to true which means you get the route id strings. if you want to disable those strings, you need to explicitly set this option to false. the docs will need to rollback to the "old" syntax with route ids as this is the default. if you want to help out with the docs, PRs welcome!

[Rc85]

Running into the same issue. Can't create layout route because it requires a path argument. How do we create layout route now?

https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#layout-routes

This tree structure is used to wrap the child routes with a layout component:

tsx

import { Outlet, createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute({
  component: AppLayoutComponent,
})

function AppLayoutComponent() {
  return (
    <div>
      <h1>App Layout</h1>
      <Outlet />
    </div>
  )
}

Using // @ts-ignore to ignore the error, I get this

Error: Conflicting configuration paths were found for the following routes: "/", "/".
Please ensure each route has a unique full path.
Conflicting files:
 F:\Projects\orderone\client\web\business\src\routes\index.tsx
 F:\Projects\orderone\client\web\business\src\routes\route.tsx

[schiller-manuel]

@Rc85 run the dev server, it should autofix those

[Rc85]

@schiller-manuel npm run dev? That's what I did and that's the first error I get. Typescript is showing this error in the first argument passed to createFileRoute.

Argument of type '{ component: () => JSX.Element; }' is not assignable to parameter of type 'keyof FileRoutesByPath'

[schiller-manuel]

@Rc85 the conflicting paths error is a misconfig on your side. remove route.tsx and then it should work

[Rc85]

@schiller-manuel So how do we build route layouts?

[schiller-manuel]

@Rc85 either via pathless routes or by putting it into the root route. for further discussion please come join our discord

https://discord.com/invite/tanstack-719702312431386674