React 路由器 5：重定向在浏览器的 url 中删除参数值

Question

我的路线定义如下：

<Route path={`${match.path}/:id`} component={SheetRoutes} />

和SheetRoutes：

const SheetRoutes = ({ match }: RouteComponentProps): JSX.Element => (
  <Switch>
    <Sheet>
      <Route
        exact
        path={`${match.path}/`}
        render={() => <Redirect to={`${match.path}/general`} />}
      />
      <Route path={`${match.path}/general`} component={GeneralRoutes} />
      ...
    </Sheet>
    <Redirect strict to='/404' push />
  </Switch>
);

我希望当用户在 url 中键入 /5 时将他重定向到 /5/general，在这种情况下它工作正常并且视图会相应更新。

我遇到的问题是浏览器中的 url 删除了 id 值，它看起来像这样：/:id/general 而不是 /5/general。

我该如何解决这个问题？

Answer 1

对于 SheetRoutes 中的 Redirect 组件，它应该是 match.url（这是真正的路径值）而不是 match.path。

React 路由器 5：重定向在浏览器的 url 中删除参数值

React router 5: Redirect drops param value in browser's url

reactjs

react-router