Typescript React重定向参数

发布于02月27日

我们正在从用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

import { Navigate, useParams, generatePath } from "react-router-dom"; const Redirect = ({ to }) => { const params = useParams(); return <Navigate to={generatePath(to, params)} replace />; };

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

Typescript React重定向参数

推荐答案

Typescript相关问答推荐

如何传递基于TypScript中可变类型的类型？

Typescript对每个属性具有约束的通用类型

类型断言添加到类型而不是替换

TypeScript Page Routing在单击时不呈现子页面(React Router v6)

如何在排版中正确键入中间件链和控制器链

打字类型保护递归判断

使用Dockerfile运行Vite React应用程序时访问env变量

TypeScrip：来自先前参数的参数中的计算(computed)属性名称

扩展参数必须具有元组类型或传递给REST参数

如何过滤文字中的类对象联合类型？

Typescript 中相同类型的不同结果

为什么特定的字符串不符合包括该字符串的枚举？

使用Cypress测试从Reaction受控列表中删除项目

Rxjs将省略的可观测对象合并到一个数组中

如何为带有参数的函数类型指定类型保护？

如何在TypeScript中将元组与泛型一起使用？

可以'；t使用t正确地索引对象；联合；索引类型

我可以在 Typescript 中重用函数声明吗？

Typescript 确保通用对象不包含属性

当受其他参数限制时，通用参数类型不会缩小