Javascript 我创建了一个实用函数，但可以'；I don’我不能在那里工作怎么解决这个问题

我学习了React和JavaScript，我对这一点和现在的React路由器V6非常陌生。我有一个从两个位置调用的方法 想要创建一个util函数来处理这个问题

看起来是这样的：

import { useNavigate } from 'react-router-dom';
import * as ROLES from '../../../constants/roles';

export default function dashboardNavigater() {
    const { authUser } = this.props;
    const navigate = useNavigate();
    if (authUser) {
        if (authUser.roles.includes(ROLES.ANON)) {
            navigate('/app/login');
        } else if (authUser.roles.includes(ROLES.USER) || authUser.roles.includes(ROLES.ADMIN)) {
            const view = localStorage.getItem('currentDashBoardView');
            // Here if user has used nav menu earlier then that last view is loaded
            if (view) navigate(view);
            // or default to dash
            else navigate('/app/dashboard');
        }
    }
}

import React from 'react';
import styled from 'styled-components';
import WithDashboardNavigate from '../../session/WithDashboardNavigate';
import dashboardNavigater from '../DashboardLayout/NavBar/DashboardNavigater';

function SignedInButton({ onDashboard }) {
    function openDashboard() {
        dashboardNavigater();
    }

    return (
        <div>
            <Button className="button is-large" onClick={openDashboard}>
                <span className="icon is-medium">
                    <i className="fas fa-user" />
                </span>
            </Button>
        </div>
    );
}

但我得到了这个错误：

  Line 6:19:  React Hook "useNavigate" is called in function "dashboardNavigater" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

如何修复/重构它，以便使用此

useNavigate（）

我想像这样使用这个util函数：

import { useNavigate } from 'react-router-dom';
import * as ROLES from '../../../constants/roles';

export default function dashboardNavigater() {
    const { authUser } = this.props;
    const navigate = useNavigate();
    if (authUser) {
        if (authUser.roles.includes(ROLES.ANON)) {
            navigate('/app/login');
        } else if (authUser.roles.includes(ROLES.USER) || authUser.roles.includes(ROLES.ADMIN)) {
            const view = localStorage.getItem('currentDashBoardView');
            // Here if user has used nav menu earlier then that last view is loaded
            if (view) navigate(view);
            // or default to dash
            else navigate('/app/dashboard');
        }
    }
}

import React from 'react';
import styled from 'styled-components';
import WithDashboardNavigate from '../../session/WithDashboardNavigate';
import dashboardNavigater from '../DashboardLayout/NavBar/DashboardNavigater';

function SignedInButton({ onDashboard }) {
    function openDashboard() {
        dashboardNavigater();
    }

    return (
        <div>
            <Button className="button is-large" onClick={openDashboard}>
                <span className="icon is-medium">
                    <i className="fas fa-user" />
                </span>
            </Button>
        </div>
    );
}

从“React”导入React；
从“样式化组件”导入样式化；
从“../../session/WithDashboardNavigate”导入WithDashboardNavigate；
从“../DashboardLayout/NavBar/DashboardNavigator”导入DashboardNavigator；
函数SignedButton（{onDashboard}）{
函数openDashboard（）{
仪表板导航器（）；
}
返回(
);
}

代码中有两个主要问题

• dashboardNavigator

  不是react组件/函数，因此不能在内部使用钩子。您要做的是在组件外部导航，您可以阅读以下内容
• 您使用了React函数组件，因此无法访问

  this.props

  ，这些props将来自函数

  const functionComp=（props）=>{…}的第一个参数

---

仪表板导航器

是一个常规功能，但您使用的是

这个.props

。这是从哪里来的？@Tholle ops应该是

导出默认函数dashboardnavigator（authUser）{…