使用React功能组件重定向到其他页面
谜之州
我在一个页面上有一个按钮，如果用户单击该按钮，我将使用以下功能重定向到另一个页面（第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;
第二次更新：
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);
任意的
如果您<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：
从History API文档中：
DOM窗口对象通过历史对象提供对浏览器会话历史的访问。
我希望这有帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
PHP-使用if条件重定向到其他页面
- 2
按钮重定向到其他页面
- 3
重定向到其他PHP页面
- 4
登录页面未重定向到其他页面
- 5
如何从索引页面重定向到其他页面
- 6
使用React功能组件进行重定向
- 7
使用htaccess将每个页面重定向到除索引页面之外的其他域
- 8
使用React Router重定向到仅显示组件/页面内容的页面
- 9
在窗口滑动时重定向到其他页面
- 10
用户确认后如何重定向到其他页面
- 11
.htaccess重定向到其他域上的特定页面
- 12
登录后将用户重定向到其他页面
- 13
GitHub页面重定向到其他站点
- 14
登录失败重定向到其他页面
- 15
用户确认后如何重定向到其他页面
- 16
提交不应重定向到HTML格式的其他页面
- 17
登录后如何重定向到其他页面
- 18
ngDialog关闭按钮重定向到其他页面
- 19
根据时间重定向到其他HTML页面
- 20
检查连接状态后重定向到其他页面
- 21
将Powershell中的对象重定向到其他功能
- 22
将管理员重定向到其他页面，将用户重定向到其他页面
- 23
DJANGO-使用数据从POST重定向到其他页面
- 24
使用URL中的一些其他参数重定向到登录页面
- 25
在Drupal网站上使用htaccess将首页重定向到其他页面
- 26
使用vue.js按下提交后将用户重定向到其他页面
- 27
在Drupal网站上使用htaccess将首页重定向到其他页面
- 28
如何使用.htaccess将所有页面重定向到除首页以外的其他域
- 29
htaccess使用查询重定向到其他站点
我来说两句