router

router copied to clipboard

Describe the bug

I'm trying to set up tanstack router on a subpath of an astro project (under '/app'), creating 2 routes "app" and "app/about". Without creating route "/", calling <router.Link> will throw Uncaught TypeError: Cannot read properties of undefined (reading 'linkProps'). Adding an empty route "/" would fix this issue:

const routeConfig = createRouteConfig().createChildren((createRoute) => [
  createRoute({
    path: "app/about",
    element: <About />,
  }),
  createRoute({
    path: "app/",
    element: <AppIndex />,
  }),

  // without defining this calling <router.Link> component will throw an error
  createRoute({
    id: "/",
  }),
]);

Your Example Website or App

https://github.com/bte234/astro-tanstack-router

Steps to Reproduce the Bug or Issue

1. Clone the repo above and install dependencies
2. Run pnpm dev
3. Go to localhost:3000/app. This page will display nothing and browser console will show the error mentioned above.

Expected behavior

I expect to not see the error mentioned and the page to be rendered properly. If this behavior is expected (the router must define the "/" path), I would like it to throw an error in the code editor instead of only failing in the runtime and have that mentioned in the docs (unless it's already there and I missed it). I would also like to have an option to define a prefix for the router if that is the case to handle the use case I described.

Screenshots or Videos

Browser error:

No error shown in the code editor:

Platform

• OS: macOS 12.6.1
• Browser: Chrome 107.0.5304.110
• Version: @tanstack/react-router 0.0.1-beta.2

Additional context

No response

+1 having the same error!

I’ll look into the error. You can define a basepath in the createReactRouter function options

Tanner Linsley Sent with Spark On Nov 9, 2022 at 4:55 AM -0800, Lucas Santos @.***>, wrote:

+1 having the same error! — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

Thank you so much for your response! I tried defining basepath as "app" in the createReactRoute function and it stops throwing the error, but now it does not seem to match when I go to "/app" or "/app/about"

const routeConfig = createRouteConfig().createChildren((createRoute) => [
  createRoute({
    path: "/",
    element: <AppIndex />,
  }),
  createRoute({
    path: "about",
    element: <About />,
  }),
]);

const router = createReactRouter({
  routeConfig,
  basepath: "app",
});

// The router doesn't match even if I click on the links
const AppEntry = () => {
  return (
    <>
      <RouterProvider router={router}>
        <div>
          <h1>App</h1>
          <nav>
            <router.Link to="/">Home</router.Link>{" "}
            <router.Link to="/about">About</router.Link>
          </nav>
        </div>
        <hr />
        <Outlet />
      </RouterProvider>
      <TanStackRouterDevtools router={router} />
    </>
  );
};

You can see here that my current route is localhost:3000/app/about and the page is now rendered, but nothing is being matched in the outlet

I created a separate branch in my repro repo for this: https://github.com/bte234/astro-tanstack-router/tree/prefix-router Maybe this should be a separate issue? Thank you so much once again!

@tannerlinsley I am having the same error when using nested routes + layout routes as wrappers only. I have created a reproducible example on https://stackblitz.com/edit/tanstack-router-issue.

Not sure if this is related to this issue but if we remove the router.Link the error disappears.

Please let me know if we can help/assist you!

Looking into it!

Tanner Linsley On Nov 10, 2022 at 1:57 AM -0700, Lucas Santos @.***>, wrote:

@tannerlinsley I am having the same error when using nested routes + layout routes as wrappers only. I have created a reproducible example on https://stackblitz.com/edit/tanstack-router-issue. Not sure if this is related to this issue but if we remove the router.Link the error disappears. Please let me know if we can help/assist you! — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

Fixed in the latest version