react router 6使用params导航到

Question

在v5中，我有这样的结构

{
path: '/someurl/:id',
exact: true,
render: ({ params }) => (<Redirect to={`/someurl/extraurl/${params.id}`} />),
}

如何将其重构到V6？

Answer 1

react-router-domv6不再具有路由道具，因此您需要创建一个新组件来收集"道具"；，或者在这种情况下为match.params并且将重定向呈现为Navigate分量。

const MyRedirect = () => {
const { id } = useParams();
return <Navigate to={`/someurl/extraurl/${id}`} replace />;
};

{
path: '/someurl/:id',
element: <MyRedirect />,
}

<Route path={obj.path} element={obj.element} />

Answer 2

接受的答案会起作用，但我也会添加我的解决方案，因为它更具动态性。您可以设置一个函数组件，该组件将使用useParams挂钩和generatePath函数，以便您的预期目的地从初始路线获得参数(无论它们是什么(：

import React, { FunctionComponent } from 'react';
import { generatePath, Navigate, useParams } from 'react-router-dom';
interface IProps {
to: string;
replace?: boolean;
state?: any;
}
const Redirect: FunctionComponent<IProps> = ({ to, replace, state }) => {
const params = useParams();
const redirectWithParams = generatePath(to, params);
return (
<Navigate to={redirectWithParams} replace={replace} state={state} />
);
};
export default Redirect;

使用这个应该适用于您的第一个示例(以及任何其他具有动态参数的路由/重定向(。