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

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

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

我想将一些值传递给其他页面，比如说

record.id，record.name

，但无法找到将这些值传递给其他页面的方法

我的另一个页面如下所示：

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

 };
export default ViewChangeRequest;

请任何人就如何重定向到其他页面以及如何检索第2页中的值提出建议

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

非常感谢

更新：

  const viewChange = (record) => {
debugger;
history.push(`/Viewchange?id=${record.id}&dataid=${record.key}`);
};

我通过了道具，但出现了一个错误，如

无法读取未定义的属性“state”

 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;

第二次更新：

  const viewChange = (record) => {
debugger;
history.push(`/Viewchange?id=${record.id}&dataid=${record.key}`);
};

routes.js文件

 {
  path: '/Viewchange/:id/:dataid',
  title: 'Viewchange',
  icon: 'dashboard',
  breadcrumbs: ['dashboard'],
  contentComponent: ViewChangeRequest,
  isEnabled: () => false,
  },

第1页：

  const viewChange = (record) => {
debugger;
history.push(`/Viewchange?id=${record.id}&dataid=${record.key}`);
};

第2页

const ViewChangeRequest = (props) => {
};
export default withRouter(ViewChangeRequest);

如果您在React应用程序中使用

进行路由，那么问题就来自于此。不幸的是，它没有状态，因为它没有使用历史API。 而

location.state

您看到的内容取决于此。所以我想这就是为什么这里有

未定义的

对于您的场景，我认为有两种可能的解决方案

使用
：

  const viewChange = (record) => {
debugger;
history.push(`/Viewchange?id=${record.id}&dataid=${record.key}`);
};

如果您将路由更改为
，则在使用后将显示位置的状态，如下所示，如下所示：

history.push('/ViewChangeRequest', { id: 'some id', dataid: 'some key' });

history.push('/ViewChangeRequest?id=someId&dataid=someKey');

从文件中：

使用HTML5历史API（pushState、replaceState和popstate事件）保持UI与URL同步的

我已经测试过了，在控制台上我看到了以下内容：

history.push('/ViewChangeRequest', { id: 'some id', dataid: 'some key' });

history.push('/ViewChangeRequest?id=someId&dataid=someKey');


使用查询字符串：

  const viewChange = (record) => {
debugger;
history.push(`/Viewchange?id=${record.id}&dataid=${record.key}`);
};

或者只需通过URL传递，如下所示：

history.push('/ViewChangeRequest', { id: 'some id', dataid: 'some key' });

history.push('/ViewChangeRequest?id=someId&dataid=someKey');

并使用
位置
的
搜索
属性：

const queryString = history.location.search;

历史API:

  const viewChange = (record) => {
debugger;
history.push(`/Viewchange?id=${record.id}&dataid=${record.key}`);
};

从文件：

DOM窗口对象通过历史对象提供对浏览器会话历史的访问

我希望这有帮助
 我希望您使用的是BrowserRouter。通过历史对象发送数据的方式很好。您确定通过props.location.state发送的任何数据都未定义吗？请尝试console.log在ViewChangeRequest页面中记录道具位置对象
 您可以使用以下代码进行重定向：

import  { Redirect } from 'react-router-dom'
.
.
.
return <Redirect to='/page1'  />

有关更多信息，请查看以下链接：


首先，按“带状态的路由”

history.push('/Viewchange',{ id: record.id, dataid: record.key });

然后，您必须使用函数包装组件，这将为您提供
历史记录
、
匹配
和
位置
道具

要访问传递的状态，请使用
location.state

const ViewChangeRequest = (props) => {
     const state = props.location.state;
     console.log(state);
     return <h1>VIEW CHANGE REQUEST</h1>
};
export default withRouter(ViewChangeRequest);

constviewchangeRequest=（道具）=>{
const state=props.location.state；
console.log（状态）；
返回视图更改请求
};
使用路由器导出默认值（ViewChangeRequest）；
有人能就此提出建议吗？您是否正在使用
？我可以使用您的解决方案，但是一些道具被多次击中，对于第一个请求，它可以正常工作，对于第二个请求，值变得未定义感谢您的响应。。我正在使用您的查询字符串方法，但得到的是带有此url的空白页面
http://localhost:3000/Viewchange?id=34daf76e9e6043238bd1725a347af8d4&dataid=96a83572aec2425a8e8ee75afbf52bd3#
@EnigmaState您在
控制台中有什么东西吗？错误消息，警告等？我得到的网址和网页是空白的，我会张贴答案，因为我需要做轻微的修改路线