javascript - How to solve "Uncaught TypeError: Cannot read property 'params' of undefined" reactjs + django

Question

i'm practicing reactjs watching this video https://www.youtube.com/watch?v=5rh853GTgKo&list=PLJRGQoqpRwdfoa9591BcUS6NmMpZcvFsM&index=9

I want to verify my information using uid and token, but I don't know how to deliver it.

In this code: Activate.js in container

import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { verify } from '../actions/auth';

const Activate = ({ verify, match }) => {
const [verified, setVerified] = useState(false);

const verify_account = e => {
  const uid = match.params.uid; // I Think This part is Problem
  const token = match.params.token;

  verify(uid, token);
  setVerified(true);
};


if (verified) {
   return <Redirect to='/' />
}

and this code : auth.js in actions

export const verify = (uid, token) => async dispatch => {
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  };

  const body = JSON.stringify({ uid, token });

  try {
    await axios.post(`${process.env.REACT_APP_API_URL}/auth/users/activation/`, body, config);

    dispatch ({
      type: ACTIVATION_SUCCESS,
    });
  } catch (err) {
    dispatch ({
      type: ACTIVATION_FAIL
    });
  }
}

i think i didn't render uid, token but i confused how to do that

App.js code:

<Router>
  <Layout>
    <Switch>
      <Route exact path ='/activate/:uid/:token'>
        <Activate />
      </Route>
    </Switch>
  </Layout>
</Router>

I'd appreciate any help. :)

question from:https://stackoverflow.com/questions/66068424/how-to-solve-uncaught-typeerror-cannot-read-property-params-of-undefined-re

Answer 1

use the useParams hook to extract uid and token params:

import React, { useState } from 'react';
import { Redirect, useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { verify } from '../actions/auth';

const Activate = ({ verify }) => {
const [verified, setVerified] = useState(false);
const { uid, token } = useParams();

const verify_account = e => {
  verify(uid, token);
  setVerified(true);
};


if (verified) {
   return <Redirect to='/' />
}