Redirecting to other page using React functional component

Question

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);

Could anyone please suggest any ideas on this – Glory Raj Dec 14 '19 at 01:39 — Glory Raj, Dec 14 '19 at 01:39
By any chance are you using ``? – norbitrial Dec 14 '19 at 01:45 — norbitrial, Dec 14 '19 at 01:45

score 0 · Accepted Answer · answered Dec 14 '19 at 02:31

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!

Thank you for the response .. i am using your query string approach but getting blank page with this url `http://localhost:3000/Viewchange?id=34daf76e9e6043238bd1725a347af8d4&dataid=96a83572aec2425a8e8ee75afbf52bd3#` — Glory Raj, Dec 14 '19 at 18:39
@EnigmaState Do you have anything in the `console`? Error message, warning, etc.? — norbitrial, Dec 14 '19 at 19:34
I will post the answer as i need to do slight modification to routes — Glory Raj, Dec 15 '19 at 00:51

score 0 · Answer 2 · answered Dec 14 '19 at 02:32

I hope you're using BrowserRouter. The way you're sending the data through history object is fine. Are you sure whatever data you're sending through props.location.state is not undefined? Try console.log the props location object in your ViewChangeRequest page.

score 0 · Answer 3 · answered Dec 14 '19 at 08:18

0

first, push to route with state

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

then, you have to wrap your component with withRouter function, this will provide you with history, match and location props.

to access the passed state use location.state

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

answered Dec 14 '19 at 08:18

Ali Faris

17,754
10
45
70

I am able to use your solution , but some how props are getting hit so many times, for the first request it is working fine for the second request , the values become undefined – Glory Raj Dec 14 '19 at 17:09

score -1 · Answer 4 · answered Dec 14 '19 at 08:04

You can use below code for redirect:

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

Or you can use history:

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

for more information check the links:

best way to redirect a page

react-router-redirection

Redirecting to other page using React functional component

4 Answers4

Linked