[Bug]: Wrong nested path rendered in v6.0.0-beta.1

[liho98]

What version of React Router are you using?

v6.0.0-beta.1

Steps to Reproduce

Codesandbox link: https://codesandbox.io/s/dreamy-cookies-1z1og

function AuthRoutes() {
  return useRoutes([
  {
    path: "login",
    element: lazy(() => import("./views/Auth/Login")),
  },
  {
    path: "forget-password",
    element: lazy(() => import("./views/Auth/ForgetPassword")),
  },
])
}

// forget-password.jsx

  <Link to="/auth/login"> // in dom got rendered as /auth/auth/login
   Login
  </Link>

       <Route path="auth/*" element={<AuthLayout />}>
            <Route path="*" element={<AuthRoutes />} />
          </Route>

Expected Behavior

it should behave as v6.0.0-beta.0, the correct should be render as /auth/login.

I think its a bug on the latest build without proper checking on nested path rendering.

Actual Behavior

The nested paths are rendered with concatenating parent path with absolute path which is incorrect , the result rendered is /auth/auth/login
Using Link component or useNavigation both returning wrong nested path.

Solution now is fallback to v6.0.0-beta.0

[thedanwoods]

Same issue here - everything in <Link /> or useNavigate() is suddenly being treated as a relative path, which makes v6.0.0-beta.1 unusable for us. It works fine in v6.0.0-beta.0.

[jgoux]

The issue seems to be that a basename is set in RouteContext, even if not explicitly provided by the user :

https://codesandbox.io/s/async-tdd-yvgk8?file=/src/Login.jsx (see the console)

Here :

react-router/packages/react-router/index.tsx

Line 541 in 05c41d5

basename = basename ? joinPaths([parentPathname, basename]) : parentPathname;

I don't think parentPathname should be provided as a fallback value for basename.

[wojtekmaj]

I think I have related issue.

I have a bunch of nested routes. In /form/, I have something along the lines

    <Routes>
      {paths.map((path) => (
        <Route
          key={path}
          path={path}
          element={<p>Step {path}</p>}
        />
      ))}
      <Route path="*" element={<Navigate to={resolvedPaths[0]} />} />
    </Routes>

where

paths = ['1', '2', '3']
resolvedPaths = ['/form/1', '/form/2', '/form/3']

so that when you enter /form you're automatically redirected to /form/1.

When updating from 6.0.0-beta.0 to 6.0.0-beta.1, this stopped working, and redirected me to /form/form/1 instead. navigate() has the same problem.

[nmarchais]

Same issue for me...

[chaance]

Fixed in #7961