javascript - 'useNavigate' is not exported from 'react-router-dom' - Stack Overflow

admin管理员组

文章数量:1388067

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 :(

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 :(

• javascript
• reactjs
• react-router-dom

Share Improve this question Follow edited Apr 26, 2021 at 23:48 Drew Reese 204k1818 gold badges245245 silver badges273273 bronze badges asked Apr 26, 2021 at 23:39 user15576045user15576045

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascript39useNavigate39 is not exported from 39reactrouterdom39Stack Overflow