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

IT技术 javascript reactjs react-router router react-functional-component
2021-05-05 00:15:45

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

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

我想将一些值传递给其他页面说，record.id, record.name但无法弄清楚我们可以将这些值传递给其他页面的方式..

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

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

 };
export default ViewChangeRequest;

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

PS：我也在使用react式功能组件和钩子。

提前谢谢了。

更新：

我通过了props但得到了一个错误 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;

第二次更新：

路由.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);
4个回答

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

您的场景有 2 种可能的解决方案，我认为可能可行。

使用<BrowserRouter>：

如果您将路由更改为<BrowserRouter>，一旦您使用如下所示，它将显示该位置的状态，如下所示：

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

从<BroswerRouter>文档：

一个<Router>使用HTML5历史API（pushState的，replaceState和popstate事件），以确保您的UI同步与URL。

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

历史

使用查询字符串：

或者只是简单地通过 URL 传递它，如下所示：

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

并使用以下search属性location：

const queryString = history.location.search;

历史API：

来自历史 API文档：

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

我希望这有帮助！

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

首先，push到带有状态的路由

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

然后，您必须用withRouter函数包装您的组件，这将为您提供history,match和locationprops。

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

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

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

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

或者您可以使用历史记录：

this.props.history.push('/path')

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

重定向页面的最佳方式

react-router重定向

其它你可能感兴趣的问题
上一篇如何在react日期中添加一年的选择？ 下一篇React.js：数组和“违反了关于合并函数的关键假设”错误