useHistory — не удается прочитать свойство ‘push’ неопределенного

#javascript #reactjs #react-router-dom

#javascript #reactjs #react-router-dom

Вопрос:

Когда нажата кнопка home, я хочу перенаправить ее на домашнюю страницу ‘/ ‘. Но я получаю эту ошибку. Что я могу сделать? :

 import { Route, useHistory } from 'react-router-dom/cjs/react-router-dom.min';
const history = useHistory();

const homeButtonOnClickHandler = () =>{
    history.push("/");
}
  
<Router>
    <Header homeButtonOnClickHandler={homeButtonOnClickHandler}/>
    <Switch>
        <Route path='/result'>
            <Result
                ingredients={ingredients}
                total={() => hesapla()} 
            />
        </Route>

        <Route path='/'>
            <Home
                ingredients={ingredients} 
                total={() => calculate()} 
                ingredientAdd={(i) => ingredientAdd(i)}
                ingredientRemove={(i) => ingredientRemove(i)}
                selectedIngredients={ingredients}
                isOrder={number}
            />
        </Route>
    </Switch>
</Router>
  

Комментарии:

1. Вы имели в виду включить сообщение об ошибке?

Ответ №1:

Вы пытаетесь использовать history hook вне Router . Напишите свою функцию внутри Header компонента.

Попробуйте этот внутренний Header компонент

 const history = useHistory();

const homeButtonOnClickHandler = () =>{
            history.push('/');
}
  

Ответ №2:

Вам просто нужно поместить хук и обработчик в компонент, как здесь: ссылка