React js TypeError：无法读取未定义的属性“参数”

Question

我正在使用 "react-router": "^6.0.0-beta.0" 并且在我的 Activate.js 文件中 我在 Chrome 上不断收到错误消息下面

TypeError: 无法读取未定义的属性“参数”

这是我的 Activate.js 代码示例，我正在使用带有 react hooks 的 功能组件 现在该代码的工作方式是发送电子邮件时当您注册并单击电子邮件激活链接时，它会将您重定向到单击的按钮，以便帐户激活，这正是我得到“不能读取未定义的属性“参数” 下面的代码正是出现错误的地方。

useEffect(() => {
/*   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 });
}

整个Activate.js文件的完整代码示例如下

    /* 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 }) => {
  const [formData, setFormData] = useState({
    name: '',
    token: '',
    show: true
  });

  useEffect(() => {
    /*   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 => {
    e.preventDefault();

    axios
      .post(`${process.env.REACT_APP_API_URL}/activation`, {
        token
      })
      .then(res => {
        setFormData({
          ...formData,
          show: false
        });
        toast.success(res.data.message);
      })
      .catch(err => {      
        toast.error(err.response.data.errors);
      });
  };

  const navigate = useNavigate();

  return (
    <div className='min-h-screen bg-gray-100 text-gray-900 flex justify-center'>
      {isAuth() ? <navigate to='/app/dashboard' /> : null}
      <ToastContainer />
      <div className='max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1'>
        <div className='lg:w-1/2 xl:w-5/12 p-6 sm:p-12'>
          <div className='mt-12 flex flex-col items-center'>
            <h1 className='text-2xl xl:text-3xl font-extrabold'>
              Welcome {name}
            </h1>

            <form
              className='w-full flex-1 mt-8 text-indigo-500'
              onSubmit={handleSubmit}
            >
              <div className='mx-auto max-w-xs relative '>
                <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'
                >
                  <i className='fas fa-user-plus fa 1x w-6  -ml-2' />
                  <span className='ml-3'>Activate your Account</span>
                </button>
              </div>
              <div className='my-12 border-b text-center'>
                <div className='leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2'>
                  Or sign up again
                </div>
              </div>
              <div className='flex flex-col items-center'>
                <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'
                >
                  <i className='fas fa-sign-in-alt fa 1x w-6  -ml-2 text-indigo-500' />
                  <span className='ml-4'>Sign Up</span>
                </a>
              </div>
            </form>
          </div>
        </div>
        <div className='flex-1 bg-indigo-100 text-center hidden lg:flex'>
          <div
            className='m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat'
            style={{ backgroundImage: `url(${authSvg})` }}
          ></div>
        </div>
      </div>
      ;
    </div>
  );
};

export default Activate;

下面是如何路由我的 Activate.js 文件的代码

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: <DashboardLayout />,
    children: [
      { path: 'account', element: <Account /> },
      { path: 'assistants', element: <AssistantList /> },
      { path: 'customers', element: <CustomerList /> },
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'markets', element: <MarketList /> },
      { path: 'products', element: <ProductList /> },
      { path: 'settings', element: <Settings /> },
      { path: '*', element: <Navigate to="/404" /> }
    ]
  },
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { path: 'login', element: <Login /> },
      { path: 'register', element: <Register /> },
      { path: '404', element: <NotFound /> },
      { path: '/', element: <Navigate to="/app/dashboard" /> },
      { path: '*', element: <Navigate to="/404" /> },
      { path: '/users/activate/:token', element: <Activate /> }, //This the route am using to route for my activate.js file
    ]
  }
];

export default routes;

只是补充一下，我正在关注一个教程，例如，这是他用来在他的 activate.js 文件中路由道具的一个例子，这就是我认为我的代码中的问题无法为了捕捉我可能面临的道具，尽管在他的教程中他使用的是更高版本的 react 而不是我在这种情况下使用的“react-router”：“^6.0.0-beta.0”，但下面是他的代码示例。

ReactDOM.render((
    <BrowserRouter>
        <App />
        <Route path='/' exact render={props => <App {...props} />}/>
        <Route path='/register' exact render={props => <Register {...props} />}/>
        <Route path='/users/activate/:token' exact render={props => <Activate {...props} />}/>
    </BrowserRouter> 
), document.getElementById('root'));

image 是 Chrome 浏览器上显示的错误。

Answer 1

您可以尝试使用useParams 钩子：

import { Link as RouterLink, useNavigate, useParams } from 'react-router-dom';

const Activate = () => {
  const [formData, setFormData] = useState({
    name: '',
    token: '',
    show: true
  });
  const {token} = useParams();

  useEffect(() => {
    let name = jwt.decode(token);

    if (token) {
      setFormData({ ...formData, name, token });
    }
    console.log(token, name);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  ...