Passing state to another component-CodePudding

I have a React App with Rest API
In my Material UI Table there is a rows when I click on the row I want to navigate to another component, but also pass the state of the row. At this moment i'm doing super lame variant of it. Using useNavigate to navigate me to the url of the component and setting the data at localstorage then take it from the component I was navigated to.

  <TableBody>
                    {data &&
                        data.map((row, index) => (
                            <TableRow
                                hover
                                key={index}
                                onClick={(e) => {
                                    navigate('/assets-list') // <====== From here it Start 
                                     window.localStorage.setItem('selectedAsset', row); 
                                }}
                                sx={{ cursor: 'pointer' }}
                            >
                                <TableCell size="small">
                                    <Typography align="left" variant="subtitle1" component="div">
                                        {row.ASSET_NAME}
                                        <Typography variant="subtitle2">{row.ASSET_TYPE_NAME}</Typography>
                                    </Typography>
                                </TableCell>
                                <TableCell>
                                    <Typography align="left" variant="subtitle1" component="div">
                                        {row.BRAND}
                                    </Typography>
                                </TableCell>
                            </TableRow>
                        ))}
                </TableBody>

CodePudding user response：

You can pass state in useNavigate hook as an optional second argument.

onClick={(e) => {
  navigate('/assets-list', { state: row })
}}

Which we'll be accessible in your AssetsList component by using useLocation hook:

const { state } = useLocation();
console.log(state);