如果没有传递值，React-Router 参数无法按预期工作返回参数名称

Question

这就是我分配routes 。

Routes = [
{
    path: "/Hibachi/:id?",
    component: HibachiGrill,
    title: "Hibachi",
    icon: <TableOutlined />,
    exact: true,
  },
{
    path: "/Barfloor",
    component: BarFloor,
    title: "Barfloor",
    icon: <RiDashboardFill />,
    exact: true,
  },
];

我正在调用这样的routes 。

       <LayoutAnt className="content">
          <Switch>
            {Routes.map((route, index) => (
              <Route
                key={index}
                exact={route.exact}
                path={route.path}
                component={route.component}
              />
            ))}
          </Switch>
        </LayoutAnt>

我的问题是当我没有在 hibachi 组件中传递任何参数时，我得到了这个结果:id我试过把? 但我仍然面临同样的问题。

Answer 1

只需查看此沙箱Simple routing with your routes 就可以正常工作。

此外，由于您没有提到如何访问参数，我想您没有使用他的useParams钩子，这就是您可能在组件中获得不需要的道具的原因。