T
TanStack•3y ago
like-gold

Child route not loading correctly?

For some reason when I set my index route to something other than / It will load the route url, but it will not load the proper component. The index route loads fine but any time I try and use link to navigate to a new route, the index route stays loaded. 
// Create the root route
const rootRoute = new RootRoute({
  component: Root,
})

// Create an index route
const indexRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/sites/killa-cams-website/',
  component: Main,
})

const aboutRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/sites/killa-cams-website/about',
  component: About,
})
// Create the root route
const rootRoute = new RootRoute({
  component: Root,
})

// Create an index route
const indexRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/sites/killa-cams-website/',
  component: Main,
})

const aboutRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/sites/killa-cams-website/about',
  component: About,
})
 <Link
   to="/sites/killa-cams-website"
   className="px-2 font-semibold hover:bg-slate-50 hover:bg-opacity-5 hover:rounded-full"
 >
    Home
 </Link>
 <Link
   to="/sites/killa-cams-website/about"
   className="px-2 font-semibold hover:bg-slate-50 hover:bg-opacity-5 hover:rounded-full"
  >
     About
  </Link>
 <Link
   to="/sites/killa-cams-website"
   className="px-2 font-semibold hover:bg-slate-50 hover:bg-opacity-5 hover:rounded-full"
 >
    Home
 </Link>
 <Link
   to="/sites/killa-cams-website/about"
   className="px-2 font-semibold hover:bg-slate-50 hover:bg-opacity-5 hover:rounded-full"
  >
     About
  </Link>
In this code, when the site first loads, main gets loaded, then when I click on about on the navbar component main stays loaded and the outlet does not load the about component. Any ideas what might be going on here?
2 Replies
foreign-sapphire
foreign-sapphire•3y ago
I think this might be this issue: https://github.com/TanStack/router/issues/528
GitHub
Routes that share parts of the path are not matched · Issue #528 · ...
Describe the bug When creating multiple routes that have some part of the path in common and have the same parent, some routes are not matched Example: const indexRoute = new Route({ getParentRoute...
like-gold
like-goldOP•3y ago
Yep! That's the same issue that is showing in mine. Thanks for sharing the issue. I wasn't sure if it was a bug or if I was doing something wrong.

Did you find this page helpful?