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。