title: React js TypeError: Cannot read property 'params' of undefined
body: <p>I am using <strong>&quot;react-router&quot;: &quot;^6.0.0-beta.0&quot;</strong> and in my <strong>Activate.js file</strong> I keep getting error on Chrome as below</p>
  <blockquote>
  <p>TypeError: Cannot read property 'params' of undefined</p>
  </blockquote>
  <p>This is my code sample for my Activate.js and I was using a <strong>functional component</strong> with <strong>react hooks</strong> now how this code is working is that when an email is sent to you when you Register and the email activation link is clicked it will redirect you to a button that is clicked so as for the account to be <strong>Activated</strong> and this is where exactly I get the <strong>&quot;Cannot Read property 'params' of undefined&quot;</strong>
  The Code below is exactly where am getting the Error.</p>
  <pre><code>useEffect(() =&gt; {
  /*   get token from params like /active/token
  then decode this token and get name*/
  let token = match.params.token; //Error is occuring Here
  let name = jwt.decode(token);
  
  if (token) {
    setFormData({ ...formData, name, token });
  }
  </code></pre>
  <p>The Full Code Sample for the Whole <strong>Activate.js</strong> file is as below</p>
  <pre><code>    /* eslint-disable no-unused-vars */
  import React, { useState, useEffect } from 'react';
  import authSvg from '../assets/welcome.svg';
  import { ToastContainer, toast } from 'react-toastify';
  import axios from 'axios';
  import jwt from 'jsonwebtoken';
  import { authenticate, isAuth } from '../helpers/auth';
  // import { Link, Redirect } from 'react-router-dom';
  import { Link as RouterLink, useNavigate } from 'react-router-dom';
  
  const Activate = ({ match }) =&gt; {
    const [formData, setFormData] = useState({
      name: '',
      token: '',
      show: true
    });
  
    useEffect(() =&gt; {
      /*   get token from params like /active/token
      then decode this token and get name*/
      let token = match.params.token; //Error is occuring Here
      let name = jwt.decode(token);
  
      if (token) {
        setFormData({ ...formData, name, token });
      }
  
      console.log(token, name);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    const { name, show, token } = formData;
  
    const handleSubmit = e =&gt; {
      e.preventDefault();
  
      axios
        .post(`${process.env.REACT_APP_API_URL}/activation`, {
          token
        })
        .then(res =&gt; {
          setFormData({
            ...formData,
            show: false
          });
          toast.success(res.data.message);
        })
        .catch(err =&gt; {      
          toast.error(err.response.data.errors);
        });
    };
  
    const navigate = useNavigate();
  
    return (
      &lt;div className='min-h-screen bg-gray-100 text-gray-900 flex justify-center'&gt;
        {isAuth() ? &lt;navigate to='/app/dashboard' /&gt; : null}
        &lt;ToastContainer /&gt;
        &lt;div className='max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1'&gt;
          &lt;div className='lg:w-1/2 xl:w-5/12 p-6 sm:p-12'&gt;
            &lt;div className='mt-12 flex flex-col items-center'&gt;
              &lt;h1 className='text-2xl xl:text-3xl font-extrabold'&gt;
                Welcome {name}
              &lt;/h1&gt;
  
              &lt;form
                className='w-full flex-1 mt-8 text-indigo-500'
                onSubmit={handleSubmit}
              &gt;
                &lt;div className='mx-auto max-w-xs relative '&gt;
                  &lt;button
                    type='submit'
                    className='mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none'
                  &gt;
                    &lt;i className='fas fa-user-plus fa 1x w-6  -ml-2' /&gt;
                    &lt;span className='ml-3'&gt;Activate your Account&lt;/span&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;div className='my-12 border-b text-center'&gt;
                  &lt;div className='leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2'&gt;
                    Or sign up again
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className='flex flex-col items-center'&gt;
                  &lt;a
                    className='w-full max-w-xs font-bold shadow-sm rounded-lg py-3
             bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5'
                    href='/register'
                    target='_self'
                  &gt;
                    &lt;i className='fas fa-sign-in-alt fa 1x w-6  -ml-2 text-indigo-500' /&gt;
                    &lt;span className='ml-4'&gt;Sign Up&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className='flex-1 bg-indigo-100 text-center hidden lg:flex'&gt;
            &lt;div
              className='m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat'
              style={{ backgroundImage: `url(${authSvg})` }}
            &gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        ;
      &lt;/div&gt;
    );
  };
  
  export default Activate;
  </code></pre>
  <p>Below is the code for how am routing my Activate.js file</p>
  <pre><code>import { Navigate } from 'react-router-dom';
  import DashboardLayout from 'src/components/DashboardLayout';
  import MainLayout from 'src/components/MainLayout';
  import Account from 'src/pages/Account';
  import CustomerList from 'src/pages/CustomerList';
  import AssistantList from 'src/pages/AssistantList';
  import MarketList from 'src/pages/MarketList';
  import Dashboard from 'src/pages/Dashboard';
  import Login from 'src/pages/Login';
  import NotFound from 'src/pages/NotFound';
  import ProductList from 'src/pages/ProductList';
  import Register from 'src/pages/Register';
  import Settings from 'src/pages/Settings';
  import Activate from 'src/pages/Activate';
  
  const routes = [
    {
      path: 'app',
      element: &lt;DashboardLayout /&gt;,
      children: [
        { path: 'account', element: &lt;Account /&gt; },
        { path: 'assistants', element: &lt;AssistantList /&gt; },
        { path: 'customers', element: &lt;CustomerList /&gt; },
        { path: 'dashboard', element: &lt;Dashboard /&gt; },
        { path: 'markets', element: &lt;MarketList /&gt; },
        { path: 'products', element: &lt;ProductList /&gt; },
        { path: 'settings', element: &lt;Settings /&gt; },
        { path: '*', element: &lt;Navigate to=&quot;/404&quot; /&gt; }
      ]
    },
    {
      path: '/',
      element: &lt;MainLayout /&gt;,
      children: [
        { path: 'login', element: &lt;Login /&gt; },
        { path: 'register', element: &lt;Register /&gt; },
        { path: '404', element: &lt;NotFound /&gt; },
        { path: '/', element: &lt;Navigate to=&quot;/app/dashboard&quot; /&gt; },
        { path: '*', element: &lt;Navigate to=&quot;/404&quot; /&gt; },
        { path: '/users/activate/:token', element: &lt;Activate /&gt; }, //This the route am using to route for my activate.js file
      ]
    }
  ];
  
  export default routes;
  </code></pre>
  <p>Just to add on I was following a tutorial for example where by this is an example of what he was using to route the props in his activate.js file and this is where i think is the problem in my code not being able to capture the props I might be facing though in his tutorial he was using a later version of react and not the &quot;react-router&quot;: &quot;^6.0.0-beta.0&quot; that i am using in this case but here below is an example of his code.</p>
  <pre><code>ReactDOM.render((
      &lt;BrowserRouter&gt;
          &lt;App /&gt;
          &lt;Route path='/' exact render={props =&gt; &lt;App {...props} /&gt;}/&gt;
          &lt;Route path='/register' exact render={props =&gt; &lt;Register {...props} /&gt;}/&gt;
          &lt;Route path='/users/activate/:token' exact render={props =&gt; &lt;Activate {...props} /&gt;}/&gt;
      &lt;/BrowserRouter&gt; 
  ), document.getElementById('root'));
  </code></pre>
  <p>The <a href="https://i.stack.imgur.com/XBQ1A.png" rel="nofollow noreferrer">image</a> is The Error Displayed on Chrome Browser.</p>