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

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?

TanStack•4y ago•

2 replies

awake-maroon

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

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>

Child route not loading correctly?

Similar Threads

Child route not loading correctly?

Similar Threads

Similar Threads

Similar Threads