fix(router): rewriteBasepath not working without trailing slash

Author: thenglong

packages/react-router/tests/router.test.tsx

@@ -2670,6 +2670,262 @@ describe('rewriteBasepath utility', () => {
     expect(router.state.location.pathname).toBe('/users')
   })
 
+  it('should handle basepath with leading slash but without trailing slash', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const usersRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/users',
+      component: () => <div data-testid="users">Users</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([usersRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/api/v1/users'],
+      }),
+      rewrite: rewriteBasepath({ basepath: '/api/v1' }), // With leading slash but no trailing slash
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('users')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/users')
+  })
+
+  it('should handle basepath without leading slash but with trailing slash', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const usersRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/users',
+      component: () => <div data-testid="users">Users</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([usersRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/api/v1/users'],
+      }),
+      rewrite: rewriteBasepath({ basepath: 'api/v1/' }), // Without leading slash but with trailing slash
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('users')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/users')
+  })
+
+  it('should handle basepath without leading and trailing slashes', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const usersRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/users',
+      component: () => <div data-testid="users">Users</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([usersRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/api/v1/users'],
+      }),
+      rewrite: rewriteBasepath({ basepath: 'api/v1' }), // Without leading and trailing slashes
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('users')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/users')
+  })
+
+  it('should not resolve to 404 when basepath has trailing slash and URL matches', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const homeRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <div data-testid="home">Home</div>,
+    })
+
+    const usersRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/users',
+      component: () => <div data-testid="users">Users</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([homeRoute, usersRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/my-app/'],
+      }),
+      rewrite: rewriteBasepath({ basepath: '/my-app/' }), // With trailing slash
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('home')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/')
+    expect(router.state.statusCode).toBe(200)
+  })
+
+  it('should not resolve to 404 when basepath has no trailing slash and URL matches', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const homeRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <div data-testid="home">Home</div>,
+    })
+
+    const usersRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/users',
+      component: () => <div data-testid="users">Users</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([homeRoute, usersRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/my-app'],
+      }),
+      rewrite: rewriteBasepath({ basepath: '/my-app' }), // Without trailing slash
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('home')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/')
+    expect(router.state.statusCode).toBe(200)
+  })
+
+  it('should handle basepath with trailing slash when navigating to root path', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const homeRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <div>
+          <Link to="/about" data-testid="about-link">
+            About
+          </Link>
+        </div>
+      ),
+    })
+
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <div data-testid="about">About</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([homeRoute, aboutRoute])
+
+    const history = createMemoryHistory({ initialEntries: ['/my-app/'] })
+
+    const router = createRouter({
+      routeTree,
+      history,
+      rewrite: rewriteBasepath({ basepath: '/my-app/' }), // With trailing slash
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const aboutLink = await screen.findByTestId('about-link')
+    fireEvent.click(aboutLink)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('about')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/about')
+    expect(history.location.pathname).toBe('/my-app/about')
+  })
+
+  it('should handle basepath without trailing slash when navigating to root path', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const homeRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <div>
+          <Link to="/about" data-testid="about-link">
+            About
+          </Link>
+        </div>
+      ),
+    })
+
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <div data-testid="about">About</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([homeRoute, aboutRoute])
+
+    const history = createMemoryHistory({ initialEntries: ['/my-app'] })
+
+    const router = createRouter({
+      routeTree,
+      history,
+      rewrite: rewriteBasepath({ basepath: '/my-app' }), // Without trailing slash
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const aboutLink = await screen.findByTestId('about-link')
+    fireEvent.click(aboutLink)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('about')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/about')
+    expect(history.location.pathname).toBe('/my-app/about')
+  })
+
   it('should handle empty basepath gracefully', async () => {
     const rootRoute = createRootRoute({
       component: () => <Outlet />,

packages/router-core/src/rewrite.ts

@@ -23,13 +23,28 @@ export function rewriteBasepath(opts: {
   caseSensitive?: boolean
 }) {
   const trimmedBasepath = trimPath(opts.basepath)
-  const regex = new RegExp(
-    `^/${trimmedBasepath}/`,
-    opts.caseSensitive ? '' : 'i',
-  )
+  const normalizedBasepath = `/${trimmedBasepath}`
+  const normalizedBasepathWithSlash = `${normalizedBasepath}/`
+
   return {
     input: ({ url }) => {
-      url.pathname = url.pathname.replace(regex, '/')
+      const pathname = opts.caseSensitive
+        ? url.pathname
+        : url.pathname.toLowerCase()
+      const checkBasepath = opts.caseSensitive
+        ? normalizedBasepath
+        : normalizedBasepath.toLowerCase()
+      const checkBasepathWithSlash = opts.caseSensitive
+        ? normalizedBasepathWithSlash
+        : normalizedBasepathWithSlash.toLowerCase()
+
+      // Handle exact basepath match (e.g., /my-app -> /)
+      if (pathname === checkBasepath) {
+        url.pathname = '/'
+      } else if (pathname.startsWith(checkBasepathWithSlash)) {
+        // Handle basepath with trailing content (e.g., /my-app/users -> /users)
+        url.pathname = url.pathname.slice(normalizedBasepath.length)
+      }
       return url
     },
     output: ({ url }) => {