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

I have a route defined as following:

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

And 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>
);

I want when the user types /5 in the url to redirect him to /5/general, in this case it works fine and the view is updated accordingly.

The problem I'm having is that the url in the browser drops the id value and it looks like this: /:id/general instead of /5/general.

How can I solve this?

CodePudding user response：

For Redirect component in your SheetRoutes, it should be match.url (which is the real path value) instead of match.path.