[Bug]: Basename is duplicated when calling setSearchParams #10431
Description
What version of React Router are you using?
6.11.0
Steps to Reproduce
- Start a React app using this code:
import { useEffect } from "react";
import ReactDOM from "react-dom/client";
import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements, useSearchParams } from "react-router-dom";
const Foo = () => {
const [_, setSearchParams] = useSearchParams();
useEffect(() => {
setSearchParams({
bar: "baz",
});
}, [setSearchParams]);
return null;
};
const router = createBrowserRouter(
createRoutesFromElements(<Route path="/foo" element={<Foo />} />),
{ basename: "/base" }
);
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<RouterProvider router={router} />
);- Configure your server to serve the app from
/base, e.g. with this Vite config:
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
base: "/base",
},
});- Open
/base/fooin your browser, e.g. with the default Vite port: http://127.0.0.1:5173/base/foo
Expected Behavior
The app should redirect to http://127.0.0.1:5173/base/foo?bar=baz
This is what happens with [email protected].
Actual Behavior
The app redirects to http://127.0.0.1:5173/base/base/foo?bar=baz
I.e. the /base part is duplicated. In React's strict mode, when everything is rendered twice in development, it even redirects to http://127.0.0.1:5173/base/base/base/foo?bar=baz