T
TanStack•2y ago
eastern-cyan

Layout for Route

I there I'm new to tanstack router for react and I have the following set up: I have the following stricture: /profile /$organisation /$organisation/$project /$organisation/$project/list /$organisation/$project/edit I have the "main layout" that I use for all routes so I have a RootRoute with my main layout and the <Outlet /> where the rout specific stuff is rendered. Everything under /$organisation/$project now has a shared layout and navigation inside the <Outlet /> "slot". What would be the best way to share the navigation and layout for /$organisation/$project, /$organisation/$project/list and /$organisation/$project/edit?
7 Replies
typical-coral
typical-coral•2y ago
Can you elaborate more?
eastern-cyan
eastern-cyanOP•2y ago
Sure, the RootRoute accepty a component that uses the <Outlet /> as the placeholder for the actual Router Component: 
const rootRoute = new RootRoute({
  component: () => (
    <div>
      <header>
        MyApp{' '}
        <nav id="mainnav">
          <MyNavigarion />
        </nav>
      </header>
      <Outlet />
      <footer>Footer</footer>
    </div>
  ),
});
const rootRoute = new RootRoute({
  component: () => (
    <div>
      <header>
        MyApp{' '}
        <nav id="mainnav">
          <MyNavigarion />
        </nav>
      </header>
      <Outlet />
      <footer>Footer</footer>
    </div>
  ),
});
But now in my case everything under /$organisation/$project has a sub-navigation. So the over all Markup should look like this: 
const completeProjectRootRoute = new RootRoute({
  component: () => (
    <div>
      <header>
        MyApp{' '}
        <nav id="mainnav">
          <MyNavigarion />
        </nav>
      </header>
      <div>
        <nav id="subnav">{...}</nav>
        <main>
          <Outlet />
        </main>
      </div>
      <footer>Footer</footer>
    </div>
  ),
});
const completeProjectRootRoute = new RootRoute({
  component: () => (
    <div>
      <header>
        MyApp{' '}
        <nav id="mainnav">
          <MyNavigarion />
        </nav>
      </header>
      <div>
        <nav id="subnav">{...}</nav>
        <main>
          <Outlet />
        </main>
      </div>
      <footer>Footer</footer>
    </div>
  ),
});
So in the end, /$organisation/$project would have the same markup as rootRoute plus the subnav and the main. So what I am looking is something like this: 
const rootRoute = new RootRoute({
  component: () => (
    <div>
      <header>
        MyApp{' '}
        <nav id="mainnav">
          <MyNavigarion />
        </nav>
      </header>
      <Outlet />
      <footer>Footer</footer>
    </div>
  ),
});

const projectRootRoute = new RootRoute({
  component: () => (
    <div>
      <nav id="subnav">{...}</nav>
      <main>
        <Outlet />
      </main>
    </div>
  ),
});
const rootRoute = new RootRoute({
  component: () => (
    <div>
      <header>
        MyApp{' '}
        <nav id="mainnav">
          <MyNavigarion />
        </nav>
      </header>
      <Outlet />
      <footer>Footer</footer>
    </div>
  ),
});

const projectRootRoute = new RootRoute({
  component: () => (
    <div>
      <nav id="subnav">{...}</nav>
      <main>
        <Outlet />
      </main>
    </div>
  ),
});
So the projectRootRoute renders into the rootRoute Outlet, if the URL matches /$organisation/$project. Do you see what I mean?
typical-coral
typical-coral•2y ago
Do you want the project root route to be nested inside of the root route?
eastern-cyan
eastern-cyanOP•2y ago
Yes.
typical-coral
typical-coral•2y ago
So something like this 
const rootRoute = new RootRoute()

// Will inherit the root layout
const organizationRoute = new Route({
  getParentRoute: () => rootRoute
})

// Will inherit the org layout
const projectRoute = new Route({
  getParentRoute: () => organizationRoute
})
const rootRoute = new RootRoute()

// Will inherit the root layout
const organizationRoute = new Route({
  getParentRoute: () => rootRoute
})

// Will inherit the org layout
const projectRoute = new Route({
  getParentRoute: () => organizationRoute
})
eastern-cyan
eastern-cyanOP•2y ago
Wait.. what? I dont get it.. Can I use <Outlet /> in the component of a Route? If not, how can I define where the Project stuff will be rendered in Parent layout?
typical-coral
typical-coral•2y ago
Outlet renders the potential children of a route as defined in your route tree Each route with children should render an outlet

Did you find this page helpful?