使用参数响应重定向

Question

我们正在从用 angularJS 编写的旧系统迁移到新系统，但问题是我们有一些专门用双斜杠编写的 url，即

"/#/work/customerDetails//:id"

现在这些 url 不适用于

useResolvedPath 

，因为它正在标准化，因此双斜线被删除。因此，我们想要放置一个重定向，它会查找旧的 url（仍然使用它们的代码位）并将它们重定向到新的 url（用单斜杠替换双斜杠，以便 useResolvedPath 可以工作）正确）。

我们目前在 React 应用程序中使用一个简单的哈希路由器（它是单 Spa 微服务的一部分），但是，我能想到的在重定向中使用的每个选项似乎都不起作用：

const router = createHashRouter(
  createRoutesFromElements(
    <Route path="work" element={<Root />}>
      <Route
        path="customerDetails//:id"
        element={<Navigate to="/#/work/customerDetails/:id" />}
      />
      <Route
        path="customerDetails/:id"
        element={<SiteAccount />}
      >
        {siteAccountRoutes}
      </Route>
    </Route>
  )
);

export default router

Answer 1

您正在尝试重定向到嵌套的哈希路由，并且新目标不会将当前路由的

id

路径参数“转发”给它。

创建一个小组件，可以嗅探当前路由参数，并将它们应用到重定向目标路径。

示例：

import {
  Navigate,
  useParams,
  generatePath
} from "react-router-dom";

const Redirect = ({ to }) => {
  const params = useParams();
  return <Navigate to={generatePath(to, params)} replace />;
};

使用指向同级

Redirect

路线的新目标路径渲染

"/work/customerDetails/:id"

。

<Route path="work" element={<Root />}>
  <Route
    path="customerDetails//:id"
    element={<Redirect to="../customerDetails/:id" />}
  />
  <Route path="customerDetails/:id" element={<SiteAccount />}>
    {siteAccountRoutes}
  </Route>
</Route>