Redirecting to other page using React functional component

问题

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

回答1:

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!

回答2:

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.

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/59331269/redirecting-to-other-page-using-react-functional-component

标签

javascript

reactjs

react-router

router

react-functional-component