首页 > 解决方案 > ReactJS - /path/:id 使用字符串重定向:id 而不是 id 值

问题描述

我正在用 react-router 编写重定向规则。定义我的路线如下:

{
  path: '/inputs',
  component: InputsContainer,
  label: 'Inputs',
  icon: 'fal fa-mobile',
  menu: false,
  routes: [
    {
      path: '/inputs',
      component: () => <Redirect to="/om/inputs" />,
      index: true,
      exact: true
    },
    {
      path: '/inputs/:id',
      component: (location) => <Redirect exact from="/inputs/:id" to={`/om/orders/:id`} />,
      label: "Order Details",
      menu: false
    },
    notFoundRoute
  ]
}

在这里, /inputs 重定向到 /om/inputs 没有任何问题。但是/inputs/23 被重定向到 /om/input/:id

我在这里缺少什么?我希望将其重定向到/om/inputs/23

标签: reactjsredirectreact-router

解决方案


您需要提供 url 而不是Redirect. 由于您使用的是渲染道具模式,因此您可以使用从回调函数参数获取的match.params.idwhere获取它。match确保你使用render而不是Component作为 Route 的道具

{
  path: '/inputs',
  component: InputsContainer,
  label: 'Inputs',
  icon: 'fal fa-mobile',
  menu: false,
  routes: [
    {
      path: '/inputs',
      render: () => <Redirect to="/om/inputs" />,
      index: true,
      exact: true
    },
    {
      path: '/inputs/:id',
      render: ({match}) => <Redirect exact from="/inputs/:id" to={`/om/orders/${match.params.id}`} />,
      label: "Order Details",
      menu: false
    },
    notFoundRoute
  ]
}

推荐阅读