You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to migrate from react-router to tanstack-router for having a great potential of great functionalities. however, I am not able to do something relatively simple in react-router:
explaining this code: <Layout/> is <Header/><Outlet/><Footer/>
when accessing the site: / will render <Layout /> and <Home /> the home with a header and footer /page1 will render <Layout /> and <Page1 /> /anyroute will render <Layout /> and <NotFound />
and /pagewithoutlayout1 will render ONLY <pageWithoutLayout1 />
I tried to replicate this using tanstack-router
constrootRoute=newRootRoute({//errorComponent:()=><>errorComponent</>,//component: ()=> <Outlet />,})constwithoutLayoutRoute=newRoute({getParentRoute: ()=>rootRoute,path: '/withoutlayout',component: ()=><>withoutLayoutRoute</>});constlayoutRoute=newRoute({getParentRoute: ()=>rootRoute,path: '/',component: layoutComponent//()=><>[Header]<Outlet />[Footer]</>});consthomeRoute=newRoute({getParentRoute: ()=>layoutRoute,path: '/',id:'home',//Duplicate routes found with id: /component: ()=><>homeRoute</>});constpage1Route=newRoute({getParentRoute: ()=>layoutRoute,path: 'page1',component: ()=><>page1</>});constanyRoute=newRoute({getParentRoute: ()=>rootRoute,path: '*',component: ()=><>anyRoute</>});rootRoute.addChildren([withoutLayoutRoute,layoutRoute.addChildren([homeRoute,page1Route]),anyRoute,// not work]);constrouter=newReactRouter({routeTree:rootRoute});
...
<RouterProviderrouter={router}/>
in this code example the <Home /> and <Page01 /> works, however <withoutLayoutRoute /> is not displayed when accessing /withoutlayout
Does anyone have a solution or is this a bug? or definitely this is not supported?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
hello
I'm trying to migrate from react-router to tanstack-router for having a great potential of great functionalities. however, I am not able to do something relatively simple in react-router:
explaining this code:
<Layout/>
is<Header/><Outlet/><Footer/>
when accessing the site:
/
will render<Layout />
and<Home />
the home with a header and footer/page1
will render<Layout />
and<Page1 />
/anyroute
will render<Layout />
and<NotFound />
and
/pagewithoutlayout1
will render ONLY<pageWithoutLayout1 />
I tried to replicate this using tanstack-router
in this code example the
<Home /> and <Page01 />
works, however<withoutLayoutRoute />
is not displayed when accessing /withoutlayoutDoes anyone have a solution or is this a bug? or definitely this is not supported?
Beta Was this translation helpful? Give feedback.
All reactions