Pass JSON object as props with useNavigate function in React [duplicate]

Question

I have a kendo grid and when a user clicks on a row he is navigated to '/details' url. I was wondering is it possible to send props (whole row data) with the useNavigate function? This is my code:

const navigate = useNavigate();
....
....
const BooleanCell = (props) => {
          return (
<td onClick={()=>{navigate('/details')}}><HiCursorClick/>{props.dataItem.sn_template_id}</td>
                 )
        }

So when a user clicks on this row he is redirected to /details url. The thing I want is to send props, which contains a JSON object with multiple key-value pairs, to that detail url. Is it possible with useNavigate and if not, what is the best solution to my problem?

Answer 1

If you want to send state as a prop then you can do it as below but make sure that you are using react-router-v6

navigate('success', { state })

Route props are no longer passed to rendered components, as they are now passed as JSX literals. To access route state it must be done so via the useLocation hook.

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

  return (
    <div>
      {state}
    </div>
  );
}

Answer 2

I assume you want access to that data (sn_template_id) when you get to details page? You should use query param for passing that data, and then extracting that param when on details page.

e.g. :

navigate(`/details?id=${props.dataItem.sn_template_id}`)

and then extract that info on the details page.

I don't know which version of React-Router you're using so it depends which hook you use to extract it. But it will be useLocation() most likely.