fix: add route.to for navigation

Fixes #630
TanStack · Jul 10, 2023 · 572caa5 · 572caa5
1 parent 6c19fe5
commit 572caa5
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 30 deletions.
diff --git a/examples/react/basic-ssr-streaming/src/routes/posts.tsx b/examples/react/basic-ssr-streaming/src/routes/posts.tsx
@@ -28,7 +28,7 @@ function Posts() {
           return (
             <li key={post.id} className="whitespace-nowrap">
               <Link
-                to={postIdRoute.fullPath}
+                to={postIdRoute.to}
                 params={{
                   postId: post.id,
                 }}

diff --git a/examples/react/basic-ssr-with-html/src/routes/posts.tsx b/examples/react/basic-ssr-with-html/src/routes/posts.tsx
@@ -55,7 +55,7 @@ export const postsRoute = new Route({
             return (
               <li key={post.id} className="whitespace-nowrap">
                 <Link
-                  to={postIdRoute.fullPath}
+                  to={postIdRoute.to}
                   params={{
                     postId: post.id,
                   }}

diff --git a/examples/react/basic-ssr/src/routes/posts.tsx b/examples/react/basic-ssr/src/routes/posts.tsx
@@ -43,7 +43,7 @@ export const postsRoute = new Route({
             return (
               <li key={post.id} className="whitespace-nowrap">
                 <Link
-                  to={postIdRoute.fullPath}
+                  to={postIdRoute.to}
                   params={{
                     postId: post.id,
                   }}

diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx
@@ -89,7 +89,7 @@ const rootRoute = RootRoute.withRouterContext<RouterContext>()({
             Home
           </Link>{' '}
           <Link
-            to="/posts"
+            to={'/posts'}
             activeProps={{
               className: 'font-bold',
             }}
@@ -144,7 +144,7 @@ const postsRoute = new Route({
             return (
               <li key={post.id} className="whitespace-nowrap">
                 <Link
-                  to={postRoute.fullPath}
+                  to={postRoute.to}
                   params={{
                     postId: post.id,
                   }}

diff --git a/examples/react/kitchen-sink-multi-file/src/routes/dashboard/invoices/index.tsx b/examples/react/kitchen-sink-multi-file/src/routes/dashboard/invoices/index.tsx
@@ -60,7 +60,7 @@ export const invoicesRoute = new Route({
                       <Spinner />
                     ) : (
                       <MatchRoute
-                        to={invoiceRoute.fullPath}
+                        to={invoiceRoute.to}
                         params={{
                           invoiceId: invoice.id,
                         }}

diff --git a/examples/react/kitchen-sink-multi-file/src/routes/dashboard/invoices/invoice.tsx b/examples/react/kitchen-sink-multi-file/src/routes/dashboard/invoices/invoice.tsx
@@ -3,9 +3,15 @@ import { z } from 'zod'
 import { fetchInvoiceById, patchInvoice } from '../../../mockTodos'
 import { InvoiceFields } from '../../../components/InvoiceFields'
 import { invoicesLoader, invoicesRoute } from '.'
-import { useNavigate, Link, Route } from '@tanstack/router'
+import {
+  useNavigate,
+  Link,
+  Route,
+  RegisteredRoutesInfo,
+} from '@tanstack/router'
 import { Loader } from '@tanstack/react-loaders'
 import { Action, useAction } from '@tanstack/react-actions'
+import { invoicesIndexRoute } from './invoices'
 
 class InvoiceNotFoundError extends Error {}
 

diff --git a/examples/react/kitchen-sink-single-file/src/main.tsx b/examples/react/kitchen-sink-single-file/src/main.tsx
@@ -213,7 +213,7 @@ const indexRoute = new Route({
         <div className={`text-lg`}>Welcome Home!</div>
         <hr className={`my-2`} />
         <Link
-          to={invoiceRoute.fullPath}
+          to={invoiceRoute.to}
           params={{
             invoiceId: 3,
           }}
@@ -359,7 +359,7 @@ const invoicesRoute = new Route({
                       <Spinner />
                     ) : (
                       <MatchRoute
-                        to={invoiceRoute.fullPath}
+                        to={invoiceRoute.to}
                         params={{
                           invoiceId: invoice.id,
                         }}
@@ -686,7 +686,7 @@ const usersRoute = new Route({
                   <pre className="text-sm">
                     {user.name}{' '}
                     <MatchRoute
-                      to={userRoute.fullPath}
+                      to={userRoute.to}
                       search={(d) => ({
                         ...d,
                         userId: user.id,
@@ -794,7 +794,7 @@ const authenticatedRoute = new Route({
     console.log('tanner', error)
     if (error === AuthError) {
       throw redirect({
-        to: loginRoute.fullPath,
+        to: loginRoute.to,
         search: {
           // Use latestLocation (not currentLocation) to get the live url
           // (as opposed to the committed url, which is technically async

diff --git a/examples/react/start-basic/src/app/routes/posts.tsx b/examples/react/start-basic/src/app/routes/posts.tsx
@@ -52,7 +52,7 @@ export const postsRoute = new Route({
             return (
               <li key={post.id} className="whitespace-nowrap">
                 <Link
-                  to={postIdRoute.fullPath}
+                  to={postIdRoute.to}
                   params={{
                     postId: post.id,
                   }}

diff --git a/examples/react/start-kitchen-sink-single-file/src/main.tsx b/examples/react/start-kitchen-sink-single-file/src/main.tsx
@@ -217,7 +217,7 @@ const indexRoute = new Route({
         <div className={`text-lg`}>Welcome Home!</div>
         <hr className={`my-2`} />
         <Link
-          to={invoiceRoute.fullPath}
+          to={invoiceRoute.to}
           params={{
             invoiceId: 3,
           }}
@@ -367,7 +367,7 @@ const invoicesRoute = new Route({
                       <Spinner />
                     ) : (
                       <MatchRoute
-                        to={invoiceRoute.fullPath}
+                        to={invoiceRoute.to}
                         params={{
                           invoiceId: invoice.id,
                         }}
@@ -691,7 +691,7 @@ const usersRoute = new Route({
                   <pre className="text-sm">
                     {user.name}{' '}
                     <MatchRoute
-                      to={userRoute.fullPath}
+                      to={userRoute.to}
                       search={(d) => ({
                         ...d,
                         userId: user.id,
@@ -789,7 +789,7 @@ const authenticatedRoute = new Route({
   onLoadError: (error) => {
     if (error === AuthError) {
       router.navigate({
-        to: loginRoute.fullPath,
+        to: loginRoute.to,
         search: {
           // Use latestLocation (not currentLocation) to get the live url
           // (as opposed to the committed url, which is technically async

diff --git a/examples/react/with-react-query/src/main.tsx b/examples/react/with-react-query/src/main.tsx
@@ -84,7 +84,7 @@ const postsRoute = new Route({
             return (
               <li key={post.id} className="whitespace-nowrap">
                 <Link
-                  to={postRoute.fullPath}
+                  to={postRoute.to}
                   params={{
                     postId: post.id,
                   }}

diff --git a/packages/router/src/link.ts b/packages/router/src/link.ts
@@ -61,12 +61,12 @@ export type ParsePathParams<T extends string> = Split<T>[number] extends infer U
     : never
   : never
 
-type Join<T> = T extends []
+type Join<T, Delimiter extends string = '/'> = T extends []
   ? ''
   : T extends [infer L extends string]
   ? L
   : T extends [infer L extends string, ...infer Tail extends [...string[]]]
-  ? CleanPath<`${L}/${Join<Tail>}`>
+  ? CleanPath<`${L}${Delimiter}${Join<Tail>}`>
   : never
 
 export type RelativeToPathAutoComplete<
@@ -286,10 +286,7 @@ export type CheckPath<
   : CheckPathError<TRoutesInfo, Exclude<TPath, TRoutesInfo['routePaths']>>
 
 export type CheckPathError<TRoutesInfo extends AnyRoutesInfo, TInvalids> = {
-  Error: `${TInvalids extends string
-    ? TInvalids
-    : never} is not a valid route path.`
-  'Valid Route Paths': TRoutesInfo['routePaths']
+  to: TRoutesInfo['routePaths']
 }
 
 export type CheckId<TRoutesInfo extends AnyRoutesInfo, TPath, TPass> = Exclude<

diff --git a/packages/router/src/route.ts b/packages/router/src/route.ts
@@ -474,6 +474,7 @@ export class Route<
   __types!: {
     parentRoute: TParentRoute
     path: TPath
+    to: TrimPathRight<TFullPath>
     fullPath: TFullPath
     customId: TCustomId
     id: TId
@@ -514,6 +515,7 @@ export class Route<
   // customId!: TCustomId
   path!: TPath
   fullPath!: TFullPath
+  to!: TrimPathRight<TFullPath>
 
   // Optional
   children?: TChildren
@@ -611,6 +613,7 @@ export class Route<
     this.id = id as TId
     // this.customId = customId as TCustomId
     this.fullPath = fullPath as TFullPath
+    this.to = fullPath as TrimPathRight<TFullPath>
   }
 
   addChildren = <TNewChildren extends AnyRoute[]>(
@@ -771,17 +774,17 @@ type ResolveFullPath<
 
 type RoutePrefix<
   TPrefix extends string,
-  TId extends string,
-> = string extends TId
+  TPath extends string,
+> = string extends TPath
   ? RootRouteId
-  : TId extends string
+  : TPath extends string
   ? TPrefix extends RootRouteId
-    ? TId extends '/'
+    ? TPath extends '/'
       ? '/'
-      : `/${TrimPath<TId>}`
-    : `${TPrefix}/${TId}` extends '/'
+      : `/${TrimPath<TPath>}`
+    : `${TPrefix}/${TPath}` extends '/'
     ? '/'
-    : `/${TrimPathLeft<`${TrimPathRight<TPrefix>}/${TrimPath<TId>}`>}`
+    : `/${TrimPathLeft<`${TrimPathRight<TPrefix>}/${TrimPath<TPath>}`>}`
   : never
 
 export type TrimPath<T extends string> = '' extends T