Блог

Главная - Вопросы по программированию - Как использовать history.push из react-маршрутизатора dom в react?

Как использовать history.push из react-маршрутизатора dom в react?

#reactjs #typescript #react-router #react-router-dom

Вопрос:

я хочу, чтобы пользователь при нажатии кнопки переходил по URL-адресу «/item/24». для этого я хочу использовать history.push в reactrouter-dom

ниже приведен мой код,

 import { History } from 'history';

type Something = {
    history: History<any>; 
}
type DialogProps = {
    icon: React.ReactNode;
    isActive: boolean;
};

const Dialog: React.FC<Something amp; DialogProps> = ({
    icon,
    history,
}) => (
    <button onClick={()=> history amp;amp; history.push( `/item/?itemId=${id}`)> 
        click
    </button>
);

но это приводит к ошибке машинописи, как показано ниже

аргумент типа ‘FC(что-то amp; {значок: ReactNode не может быть присвоен параметру типа ElementType’

может кто-нибудь помочь мне это исправить. Спасибо.

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

1. почему бы вам не создать метод и не вызвать этот метод при нажатии кнопки и внутри истории вызовов этого метода.нажмите

2. спасибо, не могли бы вы добавить свой ответ, пожалуйста. я не уверен, почему я получаю ошибку машинописи.

3. В каком файле / строке вы видите эту ошибку : FC(Something amp; {icon: ReactNode is not assignable to parameter of type ElementType ?

4. Вместо Something этого делай import { RouteComponentProps } from 'react-router-dom' и используй RouteComponentProps .

Ответ №1:

Почему бы вам не использовать компонент Link ?

 <Link to="`/item/?itemId=${id}`">
    <button> 
        click
    </button>
</Link>

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

1. я использовал ссылку вместо кнопки. но я должен использовать кнопку для ее стилизации

Ответ №2:

Что 7 такое он-лайн 3? Так и должно быть { ?

 type Something = {
    history: History<any>; 
}

Заменить запятую , точкой с запятой ; 

 type DialogProps = {
    icon: React.ReactNode;
    isActive: boolean;
};

Ответ №3:

Я думаю, вы можете { withRouter } проверить это здесь

затем вы можете проверить свой реквизит, и тогда вы будете иметь свое history.push в себе props

Метки: