How to pass an object parameter via react-router-dom navigate

Question

I'm using useNavigate to navigate to another page. I need to pass an instance of an interface as a parameter when navigate to another page. Is there anyway to pass an interface instance as parameter?

The interface I want to pass as a paramemter:

export interface Api {
  apiDescription: string;
  apiName: string;
  documentId: string;
}

The code:

const { api, refresh } = props;
const navigate = useNavigate();
return (
    <div className="view-button-block">
      <Button
        size="small"
        sx={{ color: "#000000DE", bgcolor: "#D9D9D6" }}
        onClick={() => navigate("/managementUi/viewApi", { state: api })}
      >
        View
      </Button>
    </div>
  );

I want to pass api as a parameter when navigate to route "/managementUi/viewApi".

In viewApi.tsx the component I want to navigate to:

import React from "react";
import { useLocation } from 'react-router-dom';
import { Api } from '../../../common/Api.types';

const ViewApi = () => {
  const location = useLocation();
  console.log(location.state);
  const api: Api = location.state;
  return (
    <div>
      {location.state.apiName}
    </div>
  );
};

Update: I passed api as a state in navigate(). However, in the component I navigate to, when I try to read the apiName field from it, it has error for location.state that "Object is of type 'unknown'". What's the correct way to read apiName from location.state?

If I try to assign state to a declaration of api, it will has error "type unknown is not assignable to type Api"

Presuming it's JSON/string serializable you should be able to pass it in route state. Have you tried that? See minimal reproducible example. — Drew Reese
– Drew Reese, Commented Oct 27, 2022 at 16:22
Why does the title talk about passing a Java object? Do you mean JavaScript? Because those are two very different languages. — Heretic Monkey
– Heretic Monkey, Commented Oct 27, 2022 at 17:05

Drew Reese · Accepted Answer · 2022-10-27 17:18:45Z

2

You will recast the location.state as an object with the Api interface.

Example:

import { Api } from '../../../common/Api.types';

...

const ViewApi = () => {
  const location = useLocation();
  const api = location.state as Api;

  console.log(api);
  return (
    <div>
      <ViewHeader apiName={api.apiName} />
    </div>
  );
};

edited Oct 27, 2022 at 17:18

answered Oct 27, 2022 at 16:59

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Henry Bai Over a year ago

Thanks! it casts the type to Api now. But I didn't add {}. I used const api = location.state as Api instead. If I add {}, it will has error the type Api has no property named 'api'

Drew Reese Over a year ago

@HenryBai Oh, right, sorry, that's because it's { state: api } instead of { state: { api } } when passed. Sorry for any confusion that may've caused. Thanks for catching that.

Collectives™ on Stack Overflow

How to pass an object parameter via react-router-dom navigate

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related