使用 React 功能组件重定向到其他页面 [英] Redirecting to other page using React functional component

问题描述

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

 const viewChange = (record) =>{让路径 = `newPath`;history.push('/ViewChangeRequest');};

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

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

const ViewChangeRequest = () =>{.................};导出默认的 ViewChangeRequest；

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

PS:我也在使用响应式函数组件和钩子.

非常感谢.

更新:

我通过了道具，但得到一个错误，如无法读取未定义的属性状态"

 const viewChange = (record) =>{历史推送({路径名:'/Viewchange',状态:{id:record.id，dataid:record.key}，});};

第 2 页:我正在这样检索

 const ViewChangeRequest = (props) =>{const { 数据:localCodeData，加载:localCodeDataLoading，错误:localCodeDataError } = useQuery(GET_SPECIFICLOCALCODE, {变量:{代码输入:{id:props.location.state.dataid}}，});const { 数据:requestData，加载:requestDataLoading，错误:requestDataError} = useQuery(GET_SPECIFICREQUEST, {变量:{ requestinputs: { id: props.location.state.id } },});返回 (…………......);};导出默认的 ViewChangeRequest；

第二次更新:

routes.js 文件

<代码> {path: '/Viewchange/:id/:dataid',title: '视图变化',图标:仪表板"，面包屑:['仪表板']，内容组件:ViewChangeRequest，isEnabled: () =>错误的，},

第 1 页:

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

第 2 页

const ViewChangeRequest = (props) =>{};导出默认 withRouter(ViewChangeRequest);

解决方案

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

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

使用:

如果您将路由更改为 <BrowserRouter>，它会显示位置的状态，就像您使用如下所示:

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

来自

使用查询字符串:

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

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

并使用location的search属性:

const queryString = history.location.search;

历史 API:

来自 History API 文档:

<块引用>

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

我希望这会有所帮助！

I have a page where I have button, if users click on that button I am going to redirect to other page say (page 2) using the below function:

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

I want to pass some of the values to other page say record.id, record.name but could not be able to figure it out the way we can pass these to other page..

My other page is looks like below:

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

 };
export default ViewChangeRequest;

Could any one please suggest any ideas on how to redirect to other page along with the values and also retrieving those in page 2..

PS: I am using reactive functional components and hooks as well.

Many thanks in advance.

update:

i passed the props but getting an error like Cannot read property 'state' of undefined

 const viewChange = (record) => {
history.push({
  pathname: '/Viewchange',
  state: { id: record.id, dataid: record.key },
});
};

page 2 : I am retrieving like this

 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;

second update:

routes.js file

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

page 1:

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

page 2

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

解决方案

If you are using <HashRouter> for routing in your React app then the issue is coming from there. Unfortunately it does not have state because it is not using the History API. And the location.state what you see there is depending on that. So I guess that's the reason why you got undefined there.

There are 2 possible solutions for your scenario what I think might work.

Using <BrowserRouter>:

If you change your routing to <BrowserRouter> it will show up the state of the location just like the following once you use just like the following:

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

From the <BroswerRouter> documentation:

A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

I have tested out, on the console I see the following:

Use query string:

Or just simply pass it through the URL just like the following:

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

And using the search property of location:

const queryString = history.location.search;

History API:

From History API documentation:

The DOM Window object provides access to the browser's session history through the history object.

I hope this helps!

这篇关于使用 React 功能组件重定向到其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！