0

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?

NoDiggityNoDoubt
  • 341
  • 1
  • 3
  • 18
  • You've updated and added new details to your question, which sort of changes the scope of what you are asking. What sort of JSON data are you wanting/trying to pass to the routed component? Does it need to be sent in route state or can you use a path param, i.e. `"/details/:detailId"` and the routed component uses the `detailId` param to access the JSON data? If your question is *actually* more than just "how do I send data when using the `navigate` function" then please edit to include all relevant code and details you have an issue and need help with. – Drew Reese Mar 30 '22 at 17:08

1 Answers1

0

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.

Veljko Blagojevic
  • 397
  • 2
  • 13
  • 1
    The `useParams` hook only accesses defined route path params, not any queryString parameters. You likely meant the [useSearchParams](https://reactrouter.com/docs/en/v6/api#usesearchparams) hook. – Drew Reese Mar 30 '22 at 07:42
  • No Veljko, in my props I have a JSON that I want to access when I get to details page, so this doesn't help. – NoDiggityNoDoubt Mar 30 '22 at 13:29