3

我有一个有按钮的页面，如果用户单击该按钮，我将使用以下功能重定向到其他页面（例如第 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;

第二次更新：

路由.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

4 回答 4

0

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

对于您的情况，我认为可能有两种可能的解决方案。

使用<BrowserRouter>：

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

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

从<BroswerRouter>文档中：

使用<Router>HTML5 历史 API（pushState、replaceState 和 popstate 事件）使您的 UI 与 URL 保持同步的 A。

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

历史

使用查询字符串：

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

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

并使用 的search属性location：

const queryString = history.location.search;

历史API：

从历史 API文档：

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

我希望这有帮助！

于 2019-12-14T02:31:54.423 回答
0

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

于 2019-12-14T02:32:13.117 回答
0

首先，推送到带有状态的路由

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);
于 2019-12-14T08:18:55.717 回答
-1

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

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

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

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

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

重定向页面的最佳方法

反应路由器重定向

于 2019-12-14T08:04:41.087 回答