Cannot access url argument with React using async function

Question

With React, I want to access to a URL parameter inside an Async function.

I have been using React route as following :

return (
    <BrowserRouter>
        <Routes>
            <Route path="/signin/:projectUUID" element={<SignIn />} />

I have been trying to access the projectUUID parameter from an asycn function as follows:

export const EmailSendEmailMagicLink = async (callback) =>
{
  let resultState = { state: '', data: {} };

  const { projectUUID } = this.props; // ( 45th line is here )
  let project_uuid = projectUUID ? projectUUID : "";

(Update the question as requested below) This is where I invoke the function :

const EmailSignInBtn = async (form_data, file) =>
  {
    let result = await EmailSendEmailMagicLink();

And this is HTML :

  <Box className='signup-Btn' onClick={EmailSignInBtn}>
    Get Magic Link
  </Box>

However, when I execute the request, I get the following error :

    ApiProvider.js:45 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'props')
        at EmailSendEmailMagicLink (ApiProvider.js:45:1)
        at EmailSignInBtn (signIn.js:42:1)
        at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
        at invokeGuardedCallback (react-dom.development.js:4277:1)
        at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
        at executeDispatch (react-dom.development.js:9041:1)
        at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
        at processDispatchQueue (react-dom.development.js:9086:1)
        at dispatchEventsForPlugins (react-dom.development.js:9097:1)

What shall I do to access the url argument from / within the async function ?

Note :

When I use useParams as following

  const { projectUUID } = useParams();
  let project_uuid = projectUUID ? projectUUID : "";

I get the following error :

Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks

As far as i can tell "this" does not refer to the component when it's called. If you have access to props in EmailSignInBtn function, maybe you should try this await EmailSendEmailMagicLink.call(this). — fatih.jsx
– fatih.jsx, Commented Jan 25, 2023 at 14:32
Please edit to include a more complete minimal reproducible example. The SignIn is what needs to access the route params. — Drew Reese
– Drew Reese, Commented Jan 25, 2023 at 15:53

OneQ · Accepted Answer · 2023-01-25 14:44:25Z

1

As you are using the last version of react-router-dom and you are using the element props in your Route, you can use useParams() from react-router-dom.

answered Jan 25, 2023 at 14:44

OneQ

1,5071 gold badge13 silver badges17 bronze badges

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

2 Comments

london_utku Over a year ago

When I use const { projectUUID } = useParams(); in EmailSendEmailMagicLink function, I get following error : Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks

OneQ Over a year ago

If you have a class component, turn it into a functional component

Collectives™ on Stack Overflow

Cannot access url argument with React using async function

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