Problem with getting data from react-router-dom useParams hook

[Артур Кустяев]

Can't get data from react-router-dom useParams hook using it inside NiceModal.create() function.

CodeSandbox: https://codesandbox.io/s/nice-modal-useparams-bug-dm3qz8

[Kaka Nguyen]

i have the same problem, any idea resolved it?

[Nate Wang]

To use the router params, plz use the declarative way:
https://opensource.ebay.com/nice-modal-react/#declarative

For example:

export default function AntdSample() {
  return (
    <>
      <Button type="primary" onClick={() => NiceModal.show('my-antd-modal', { name: 'Nate' })}>
        Show Modal
      </Button>
      <MyAntdModal id="my-antd-modal" {...otherProps} />
    </>
  );
}

[Nate Wang]

See the updated codesandbox: https://codesandbox.io/s/nice-modal-useparams-bug-forked-riu9d7

[Kaka Nguyen]

See the updated codesandbox: https://codesandbox.io/s/nice-modal-useparams-bug-forked-riu9d7

but in your example i comment this line <Modal id="my-modal"/> and use show() method <Button onClick={() => NiceModal.show(Modal)}>show modal</Button> i have problem, because i used create method for register modal, any way for this?

[Nate Wang]

See the updated codesandbox: https://codesandbox.io/s/nice-modal-useparams-bug-forked-riu9d7

but in your example i comment this line <Modal id="my-modal"/> and use show() method <Button onClick={() => NiceModal.show(Modal)}>show modal</Button> i have problem, because i used create method for register modal, any way for this?

In case you want your modal to be rendered in the current context, it must be declared as a normal component and manage it by id.

[Nate Wang]

An alternative way is get params in the component where you call modal.show then pass the parameters to the modal.

[Артур Кустяев]

Thanks for the reply, i appreciate it ❤