-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
fix(router-core): ensure rewrite basepath applies consistently #5202
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from 11 commits
23be5f9
593cb78
508303a
2b831cf
a9dbeb7
b9a4ce3
e900a66
a161948
977587d
7f764e8
bcff760
9215441
8ad0f67
918e51e
a22766a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2836,6 +2836,72 @@ describe('rewriteBasepath utility', () => { | |
expect(router.state.location.pathname).toBe('/test') | ||
}) | ||
|
||
it('should handle basepath when accessing root path and maintain basepath in browser URL', async () => { | ||
const rootRoute = createRootRoute({ | ||
component: () => <Outlet />, | ||
}) | ||
|
||
const indexRoute = createRoute({ | ||
getParentRoute: () => rootRoute, | ||
path: '/', | ||
component: () => <div data-testid="home">Home</div>, | ||
}) | ||
|
||
const routeTree = rootRoute.addChildren([indexRoute]) | ||
|
||
const history = createMemoryHistory({ | ||
initialEntries: ['/my-app/'], | ||
}) | ||
|
||
const router = createRouter({ | ||
routeTree, | ||
history, | ||
rewrite: rewriteBasepath({ basepath: '/my-app' }), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. please go back to we reverted the deprecation of that prop |
||
}) | ||
|
||
render(<RouterProvider router={router} />) | ||
|
||
await waitFor(() => { | ||
expect(screen.getByTestId('home')).toBeInTheDocument() | ||
}) | ||
|
||
expect(router.state.location.pathname).toBe('/') | ||
expect(history.location.pathname).toBe('/my-app/') | ||
}) | ||
|
||
it('should handle basepath option for backward compatibility', async () => { | ||
const rootRoute = createRootRoute({ | ||
component: () => <Outlet />, | ||
}) | ||
|
||
const indexRoute = createRoute({ | ||
getParentRoute: () => rootRoute, | ||
path: '/', | ||
component: () => <div data-testid="home">Home</div>, | ||
}) | ||
|
||
const routeTree = rootRoute.addChildren([indexRoute]) | ||
|
||
const history = createMemoryHistory({ | ||
initialEntries: ['/my-app/'], | ||
}) | ||
|
||
const router = createRouter({ | ||
routeTree, | ||
history, | ||
basepath: '/my-app', | ||
}) | ||
|
||
render(<RouterProvider router={router} />) | ||
|
||
await waitFor(() => { | ||
expect(screen.getByTestId('home')).toBeInTheDocument() | ||
}) | ||
|
||
expect(router.state.location.pathname).toBe('/') | ||
expect(history.location.pathname).toBe('/my-app/') | ||
}) | ||
|
||
it('should combine basepath with additional input rewrite logic', async () => { | ||
const rootRoute = createRootRoute({ | ||
component: () => <Outlet />, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -290,12 +290,15 @@ export interface RouterOptions< | |
* ```ts | ||
* const router = createRouter({ | ||
* routeTree, | ||
* rewrite: rewriteBasepath('/basepath') | ||
* // Or wrap existing rewrite functionality | ||
* rewrite: rewriteBasepath('/basepath', { | ||
* output: ({ url }) => {...}, | ||
* input: ({ url }) => {...}, | ||
* }) | ||
* rewrite: rewriteBasepath({ basepath: '/basepath' }) | ||
* // Or compose with existing rewrite functionality | ||
* rewrite: composeRewrites([ | ||
* rewriteBasepath({ basepath: '/basepath', caseSensitive: true }), | ||
* { | ||
* input: ({ url }) => {...}, | ||
* output: ({ url }) => {...}, | ||
* } | ||
* ]) | ||
* }) | ||
* ``` | ||
* @default '/' | ||
|
@@ -1688,7 +1691,7 @@ export class RouterCore< | |
return { | ||
publicHref: | ||
rewrittenUrl.pathname + rewrittenUrl.search + rewrittenUrl.hash, | ||
href: fullPath, | ||
href: rewrittenUrl.href.replace(rewrittenUrl.origin, ''), | ||
|
||
url: rewrittenUrl.href, | ||
pathname: nextPathname, | ||
search: nextSearch, | ||
|
@@ -1784,8 +1787,12 @@ export class RouterCore< | |
return isEqual | ||
} | ||
|
||
const latestPublicHref = | ||
this.latestLocation.publicHref ?? this.latestLocation.href | ||
const nextPublicHref = next.publicHref ?? next.href | ||
|
||
const isSameUrl = | ||
trimPathRight(this.latestLocation.href) === trimPathRight(next.href) | ||
trimPathRight(latestPublicHref) === trimPathRight(nextPublicHref) | ||
|
||
const previousCommitPromise = this.commitLocationPromise | ||
this.commitLocationPromise = createControlledPromise<void>(() => { | ||
|
@@ -1942,11 +1949,14 @@ export class RouterCore< | |
} | ||
} | ||
|
||
const latestPublicHref = this.latestLocation.publicHref | ||
const nextPublicHref = nextLocation.publicHref | ||
|
||
if ( | ||
trimPath(normalizeUrl(this.latestLocation.href)) !== | ||
trimPath(normalizeUrl(nextLocation.href)) | ||
trimPath(normalizeUrl(latestPublicHref)) !== | ||
trimPath(normalizeUrl(nextPublicHref)) | ||
) { | ||
throw redirect({ href: nextLocation.href }) | ||
throw redirect({ href: nextPublicHref }) | ||
} | ||
} | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
publicHref carries rewrite/basePath changes that should reflect in the browser URL
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what about the case when the rewrite changes the origin?
we would need to do a hard navigation here i think
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if we can get this solved, we can merge this