I created a utility function but can't get useNavigare to work there how to fix this

Question

I learn React and JavaScript and I'm really new to this and now the React router V6. I have a method that is called from two location and wanted to create a util function to handle this.

It looks like this:

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');
        }
    }
}

But I get this error:

  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

How can I fix/refactor this so I can use this useNavigate()

I wanted to use this util function like this:

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>
    );
}

`dashboardNavigater` is a regular function, but you are using `this.props`. Where is that coming from? — Tholle, Dec 23 '20 at 00:49
@Tholle ops should be `export default function dashboardNavigater(authUser) {...` — Kid, Dec 23 '20 at 05:07

thelonglqd · Answer 1 · 2020-12-23T02:24:40.013

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');
        }
    }
}

There are 2 main problems in your code.

dashboardNavigator is not a react Component/function so you can not use hook inside. What you're trying to do is navigating outside of a component, you can read on this post
You used React function component so the this.props can not be accessed, the props will come from the first argument of function const functionComp = (props) => {...}

I created a utility function but can't get useNavigare to work there how to fix this

1 Answers1