使用React功能组件重定向到其他页面

Question

我有一个带有按钮的页面，如果用户单击该按钮，我将使用以下功能重定向到另一个页面，例如（第2页）：

  const viewChange = (record) => {
let path = `newPath`;
history.push('/ViewChangeRequest');
};

我想将某些值传递给其他页面，例如record.id, record.name，但无法弄清楚我们将这些值传递给其他页面的方式。

我的其他页面如下所示：

const ViewChangeRequest = () => { 
.....
......
......

 };
export default ViewChangeRequest;

任何人都可以提出有关如何重定向到其他页面以及值以及如何检索第2页中的内容的任何想法。

PS：我也在使用反应性功能组件和挂钩。

非常感谢。

更新：

我通过了道具，但收到类似Cannot read property 'state' of undefined的错误>

 const viewChange = (record) => {
history.push({
  pathname: '/Viewchange',
  state: { id: record.id, dataid: record.key },
});
};
第2页：我正在这样检索

 const ViewChangeRequest = (props) => {
   const { data: localCodeData, loading: localCodeDataLoading, error: localCodeDataError } = useQuery(GET_SPECIFICLOCALCODE, {
variables: { codeinputs: { id: props.location.state.dataid } },
});
const { data: requestData, loading: requestDataLoading, error: requestDataError 
} = useQuery(GET_SPECIFICREQUEST, {
variables: { requestinputs: { id: props.location.state.id } },
});
return (
 ........
 .......

 );
};
export default ViewChangeRequest;

我有一个按钮所在的页面，如果用户单击该按钮，我将使用以下功能重定向到其他页面，例如（第2页）：const viewChange =（record）=> {让path =`newPath` ; ...

Answer 1

如果您在React应用中使用<HashRouter>进行路由，那么问题就出在这里。不幸的是，它没有状态，因为它没有使用History API。而location.state取决于您所看到的。所以我想这就是您到达undefined的原因。

Answer 2

我希望您正在使用BrowserRouter。通过历史记录对象发送数据的方式很好。您确定通过props.location.state发送的任何数据都未定义吗？在您的ViewChangeRequest页面中尝试console.log道具位置对象。

Answer 3

您可以使用以下代码进行重定向：