Javascript '；使用导航和x27；不是从'；react路由器dom'；

我试图在我的js页面中使用

useNavigate

。以下是我尝试使用它的方式：

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

---

但我还是犯了那个错误。我使用的是react路由器dom版本5.2.0和react版本17.0.2。请提供帮助：（

useNavigate

是v6中的一个新挂钩，它取代了

useHistory

挂钩

由于您仍在v5中，因此应该导入并使用

useHistory

hook来发布命令式导航

---

我也尝试了上面的方法，但不幸的是它给了我这个错误：

尝试导入错误：“useHistory”不是从“react router dom”导出的。

这很奇怪。我认为我不需要导出it@gianluca我可以告诉您一个从

react router dom

v5.2.0导出的事实。您绝对确定这就是ve吗rsion你已经安装了吗？是的。我在我的cli

npm view react router dom version

中运行了这个命令，它返回了

5.2.0

@gianluca请尝试吹走你的

node\u模块

目录，然后重新运行

npm install

来重新安装你的依赖项。不幸的是，同样的事情。我卸载了，然后重新安装了。我非常高兴奇怪的是这是怎么发生的

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

...

const history = useHistory();

let user = firebase.auth().currentUser;

if (!user) {
  history('/clients')
}