Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

109
Views
React useNavigate is erroring as not a function

So in previous React version I was able to use Redirect to change from one page to another when using some condition on if it would change. But with v6 redirect is no longer usable.

import React, {useState, Redirect, useNavigate} from 'react';
import './App.css';
import {Link} from 'react-router-dom'

function Main() {
    const handleLogInUsernameChange = (event) => {
        setLogInUsername(event.target.value)
    }

    const handleLogInPasswordChange = (event) => {
        setLogInPassword(event.target.value)
    }

    let navigate = useNavigate();
    
    function RedirectTo(){
        navigate('/dashboard')
    }

    function checkLogInCred(){
        fetch("https://api.apispreadsheets.com/data/xxxxxxxxxxxxxxxxxxx/").then(res=>{
            if (res.status === 200){
                // SUCCESS
                res.json().then(data=>{
                    const yourData = data
                    for(var a = 0; a < yourData.data.length - 1;a++){
                        if(yourData.data[a].Password === logInPassword &&
                            yourData.data[a].UserName === logInUsername)
                            {
                                logInStatus = "Logged"
                                console.log("You have logged in")
                                a = yourData.data.length
                                //<Redirect to="/dashboard" />
                                RedirectTo()
                            }
                    }
                }).catch(err => console.log(err))
            }
            else{
                // ERROR
            }
        })
        //navigate('/dashboard')
    }

    return (
        <div>
            <p>
                <input type="text" placeholder="Enter username" onChange={handleLogInUsernameChange}></input>
            </p>
            <p>
                <input type="text" placeholder="Enter password" onChange={handleLogInPasswordChange}></input>
            </p>
            <p>
                <button onClick={checkLogInCred}>Login</button> 
            </p>
        </div>
    );
}

export default Main;

Seems like everything is only working in onClick functions only

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

import {useNavigate} from "react-router-dom";

useNavigate is part of react-router-dom not React.

In your case, it will be something like:

import {Link,useNavigate} from 'react-router-dom'
about 4 years ago · Juan Pablo Isaza Report

0

useNavigate is imported from react-router-dom, so in your case:

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

about 4 years ago · Juan Pablo Isaza Report

0

you are importing it from then react.

import React, {useState, Redirect, useNavigate} from 'react';

import it from react-router-dom

import { useNavigate } from "react-router-dom";

hope it will resolve the redirection.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!