React Js : Redirect to another page on button click with table row data

Question

I am trying to redirect from Page 'SalesList.jsx' to 'SalesInvoice.jsx' by clicking a button, but failed to do so. I am getting all the props on button click but unable to call the later page.

I am sharing my code for better understanding:

calling onSalesView function on button click by passing row value as props

<Table.Row key={id}>
  <Table.Cell>{row.id}</Table.Cell>
  <Table.Cell>{row.ServiceNo}</Table.Cell>
  <Table.Cell>{row.ServiceName}</Table.Cell>
  <Table.Cell>{row.Cost}</Table.Cell>
  <Table.Cell>
    <Dropdown icon='ellipsis vertical' floating direction="left" className='icon'>
      <Dropdown.Menu>
        <Dropdown.Item onClick={()=> onSalesView(row) }>Sales Invoice</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  </Table.Cell>    
</Table.Row>

Trying to redirect to the new page with table values. Table values are coming properly, But couldn't accomplish the redirection part.

const onSalesView = (data) => {
   return <SalesInvoice data={data} />  
}

Does this answer your question? [What is the best way to redirect a page using React Router?](https://stackoverflow.com/questions/45089386/what-is-the-best-way-to-redirect-a-page-using-react-router) — enzo, Jan 09 '22 at 21:02
How can i pass parameter into this Stefan. Router.push({ pathname:'/SalesInvoice ' }) — BaseAlpha, Jan 09 '22 at 21:26
It's better to use a routing library, take a look at this link: https://openbase.com/categories/js/best-react-routing-libraries — Lahcen, Jan 09 '22 at 21:27
So, the router will be handeling routes, the state management system like Redux is there to handle data between components.. — Stefan Avramovic, Jan 09 '22 at 21:29
Take a look at this post https://dev.to/bhatvikrant/how-to-setup-redux-with-react-2020-cdj — Stefan Avramovic, Jan 09 '22 at 21:32

score 1 · Answer 1 · edited Jan 10 '22 at 05:58

What you did is returning jsx component that will show in the Dom ... and not redirect to other component

You can use history API ... and also you can pass data to the other component like this

import { useHistory } from "react-router-dom";

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;

========================= Get Sent Params ===========================
import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};

import { useHistory } from 'react-router-dom';

const YourComponent = () => {
...
const history = useHistory();
return {
    ...
    rows.map((row) => (
        <TableRow key={row.id} onClick={() => history.push(yourLocation)}>
          <TableCell component="th" scope="row">
            {row.id}
          </TableCell>
          <TableCell align="right">{row.name}</TableCell>
          <TableCell align="right">{row.calories}</TableCell>
          <TableCell align="right">{row.fat}</TableCell>
          <TableCell align="right">{row.carbs}</TableCell>
          <TableCell align="right">{row.protein}</TableCell>
        </TableRow>
      ))}
}

Can i pass the row parameters into history.push? – BaseAlpha Jan 09 '22 at 21:28 — BaseAlpha, Jan 09 '22 at 21:28
Yes you can, I edited the answer above – Ahmed fouad Jan 09 '22 at 21:34 — Ahmed fouad, Jan 09 '22 at 21:34

React Js : Redirect to another page on button click with table row data

1 Answers1