Named routes?

[vincent-thomas]

Named Routes?

Hi! Is it possible to have named routes? It would be really nice to have it implemented (if its already not) like the angular way, where you set an key to the and then put a key in the router object. Maybe this is already implemented, but i couldn't find anything in the docs, could someone please point me in the right direction?

[tom-sherman]

You can give the route an id, if that's what you mean?

The route's name could also conceptually be it's path relative to it's position in the router hierarchy, react-location surfaces this to you as the history pathName,

[vincent-thomas]

Its hard to describe with words i'm going to try to explain it to you with a example

You have a root component, lets call that Root, so in jsx this would be

In the Root component you would have something like this

....
  return (
    <>
      <Outlet name="first"/>
      <Outlet name="second" />

    </>
  )

The router would look something like this.

{
  path: "/",
  component: <Root />
  children: [
    {
      name: "first",
      component: <h1>first</h1>
    },
    {
      name: "first",
      component: <h1>second</h1>
    }
  ]
}

With named routes that would render this

<h1>first</h1>
<h1>second</h1>

on the "/" page. Does react-location behave in this way with id? And is there a way to make this work (or in a similay way?) with the current state of the project?

[vincent-thomas]

You can give the route an id, if that's what you mean?

The route's name could also conceptually be it's path relative to it's position in the router hierarchy, react-location surfaces this to you as the history pathName,

Does id-field do anything?

[log1st]

You can use Router Context:

// rootRoute.ts
export type AppRouterContext = {
  sidebar?: FC;
};

export const rootRoute = createRootRouteWithContext<AppRouterContext>()({
  component: RootLayout,
});

// MainLayout.tsx

function MainLayout() {
  const route = useRouterState();

  const { sidebar: Sidebar } = useRouteContext({
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    from: route.location.href as any,
  });
  
  return (
    <div>
      {Sidebar ? <div class="sidebar"><Sidebar/></div> : null}
      <Outlet/> 
    </div>
  )
}

// usersRoute.ts
export const usersRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "users",
  component: UsersPage,
  context: () => ({
    sidebar: UsersSidebar
  })
});

like so.