Add Support for Named Routes in TanStack Router

[krishantalwar]

Summary:

I would like to suggest adding named routes functionality to TanStack Router, similar to what is available in other popular routing libraries like Laravel. Named routes allow developers to reference routes by a human-readable name instead of hardcoding the full path, which makes the codebase more maintainable and flexible, especially for larger applications.

Motivation:

Currently, TanStack Router is a powerful and flexible routing solution, but in many cases, it would be beneficial to reference routes by name instead of repeating the path in multiple places. This is especially useful in scenarios such as:

• Code maintainability: If routes change in the future, you would only need to update the route definition, not every occurrence where that path is used in the application.
• Code clarity: Named routes provide a clear, semantic way to refer to routes in your code.
• Flexibility: Named routes could make routing more flexible, enabling the generation of URLs dynamically or programmatically.

Proposed Solution:

Here's how I envision the named routes feature working in TanStack Router:

1. Define Routes with a name Property:
   Allow routes to be defined with a name property for human-readable identification.

   Example:

   const routes = [
     {
       name: 'home', // Named route
       path: '/',
       element: <Home />,
     },
     {
       name: 'about', // Named route
       path: '/about',
       element: <About />,
     },
     {
       name: 'userProfile', // Named route with dynamic parameter
       path: '/user/:id',
       element: <UserProfile />,
     },
   ];

2. Generate URL from Route Name:
   Provide a helper function (e.g., generatePath) that takes the route name and parameters and returns the corresponding URL path.

   Example:

   const userProfileUrl = generatePath('userProfile', { id: 123 });
   // userProfileUrl would return '/user/123'

3. Linking by Route Name:
   Allow <Link /> components to accept the route name, and automatically resolve the correct URL.

   Example:

   <Link to="userProfile" params={{ id: 123 }}>Go to User Profile</Link>

4. Redirecting by Route Name:
   Allow redirection by route name instead of using the path directly.

   Example:

   redirect('userProfile', { id: 123 });

5. Handle Dynamic Parameters:
   Ensure dynamic parameters in route paths (like /user/:id) work seamlessly with named routes.

   Example:

   const userProfileUrl = generatePath('userProfile', { id: 123 });

Benefits of Named Routes:

• Maintainability: If the path for a route changes, you only need to update the route definition, rather than all occurrences of the URL in your code.

• Readability: Using meaningful route names makes your code more semantic, improving developer experience.

• Flexibility: Named routes can be used in places like redirects, links, or even for programmatically generating URLs.

  Example Use Case:

  In a large application, having named routes means that if the URL structure changes (e.g., from /user/:id to /profile/:userId), developers don’t need to find and update every instance of that path across the codebase. Instead, they just need to change the route definition.

  Example:

  const userProfileUrl = generatePath('userProfile', { userId: 123 });
  

Next Steps:

I would love to hear feedback on this feature request. Is this something that could be useful for TanStack Router? I'd be happy to help with brainstorming or prototyping if needed!

[schiller-manuel]

we had this already here : #2456

please rather add comments to existing ones if they match closely