“usehistory ()” Réponses codées

Utilisation

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');
Motionless Mole

usehistory ()

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

function Home() {
  const history = useHistory();
  return <button onClick={() => history.push('/profile')}>Profile</button>;
}
Repulsive Rook

équivalent d'utilisation de la réaction

import { useHistory } from "react-router-dom"; // DEPRECATED
// It is now
import { useNavigate } from "react-router-dom"; // As at March 3, 2022
Code Rabbi

usehistory react-router-dome

In react-router-dom version 6 
useHistory() is replaced by useNavigate() ;

import {useNavigate} from 'react-router-dom';
const navigate = useNavigate();
navigate('/home')
Joyous Jackal

REACT ROUTER DOM COURANT COURANT

import { useLocation } from 'react-router-dom'

// Location is, for example: http://localhost:3000/users/new

// Care! MyComponent must be inside Router to work
const MyComponent = () => {
	const location = useLocation()
    
    // location.pathname is '/users/new'
    return <span>Path is: {location.pathname}</span>
}

export default MyComponent
Mr Dom

Crochet de l'histoire

// useHistory() does not work inside an arrow function 
// notice @ line 9 that the history.push() is inside a usual function. not an arrow function

let myComponent = () => {
    
const history = useHistory();
  function routeChange(){
   history.push("/author");
  }
  
  return(<>
  <button onClick={ routeChange} > redirect </button>
  </>)
    
}

      
      
      
      
Confused Crossbill

Réponses similaires à “usehistory ()”

Parcourir les réponses de code populaires par langue

Parcourir d'autres langages de code