'useNavigate' is not exported from 'react-router-dom'

Question

i am trying to use the useNavigate in my js page. here's how I am trying to use it:

import { loadStripe } from '@stripe/stripe-js';
import firebase from 'firebase';
import "firebase/auth";
import * as routes from '../routes';
import './checkout.css';
import React, { useState, useEffect } from "react";
import MyGifSpinner from './manageSubSpinner';
import './manageSubSpinner.css';
import ReactDOM from 'react-dom';
import myGif from '../pages/spinner';
import myGifSpinner from './manageSubSpinner';
import { doSignOut } from '../models/AuthorizationHome';
import {useNavigate} from 'react-router-dom';


const firestore = firebase.firestore();
const app = firebase.app();


export async function createCheckoutSession(activtyStatus){
  const navigate = useNavigate();

      let user = firebase.auth().currentUser;
    
      if (user == null) {
        navigate('/clients')
      }

  console.log(user)
 

  if (activtyStatus == "canceled") {
    console.log("sub is cancelled")
    //live price
    price = 'price_1IfmDsKDPaWWeL1ywjMTGarh'
    

  }
  
  console.log("activity status is: " + activtyStatus)

 


      const checkoutSessionRef = await firestore
      .collection('customers')
      .doc(user.uid)
      .collection('checkout_sessions')
      .add({
        price: price,
        success_url: "http://localhost:3000/clients",
        cancel_url: "http://localhost:3000/signin",
    });

    
      // Wait for the CheckoutSession to get attached by the extension
            checkoutSessionRef.onSnapshot(function (snap) {
              const { error, sessionId } = snap.data();
              if (error) {
              console.log(`An error occured: ${error.message}`);
              return;
            }
            if (sessionId) {
             
            const stripe = window.Stripe('pk');
            console.log("going to stripe: ")
           console.log("line 116 checkout.js")
            stripe.redirectToCheckout({sessionId: sessionId})
            console.log("logged stripe")
            
          }
      });
    }

but I am getting that error still. I am on react-router-dom version 5.2.0, and react version 17.0.2. Please help :(

Answer 1

useNavigate is a new hook in v6 that replaces the useHistory hook.

React Router v6 Preview

Since you are still in v5 then you should import and use the useHistory hook to issue imperative navigation.

React Router v5 Hooks

import { useHistory } from 'react-router-dom';

...

const history = useHistory();

const user = firebase.auth().currentUser;

useEffect(() => {
  if (!user) {
    history.push('/clients');
  }
}, [user]);