如何使用Navigate组件捕获传入的查询字符串/searchParams？

Question

目前我有

createBrowserRouter(createRoutesFromElements(...

里面嵌套着一个：

<Route index element={<Navigate to="/raters/start/" />} />

这对于基本 URL 来说效果很好，只是我们现在需要捕获原始路由上的任何查询字符串，并在重新路由浏览器时传递这些字符串。

有类似的功能吗？

<Route index path="?:queryString" element={<Navigate to={`/raters/start?${queryString}`} />} />

Answer 1

您需要手动捕获并转发 URL 路径 + searchParams。

示例：

• 自定义组件

  import { Navigate, useSearchParams } from "react-router-dom";
  
  const NavigateWithSearchParams = (props) => {
    const [searchParams] = useSearchParams();
  
    const newProps = {
      ...props,
      to: {
        // Don't spread `to` prop when it is a string value
        ...(typeof props.to === "string" ? { pathname: props.to } : props.to),
        search: searchParams.toString(),
      },
    };
  
    return <Navigate {...newProps} />;
  };
  

  <Route
    index
    element={<NavigateWithSearchParams to="/raters/start" />}
  />
  

• 阅读并转发

  window.location.search

  <Route
    index
    element={
      <Navigate
        to={{
          pathname: "/raters/start",
          search: window.location.search,
        }}
      />
    }
  />