Как я могу использовать реквизит истории с другими реквизитами - PullRequest
Новая
       52

Как я могу использовать реквизит истории с другими реквизитами

0 голосов
/ 25 апреля 2020

Я использую react-router-dom с react. Я пытаюсь получить другие реквизиты с history prop

import React from 'react';

function MyComponent({ history }) {
   function redirect() {
      history.push('/path');
   }

   return (
      <>
         <button onClick={redirect}>Some Button</button>
      </>
   );
}

export default MyComponent;

Это будет работать, но если я поставлю другую опору, как это 

function MyComponent({myFunction, history}) {}

Это не сработает

Есть ли альтернативы этому или я что-то не так делаю?

Ответы [ 2 ]

1 голос
/ 25 апреля 2020

Попробуйте - вы можете получить столько реквизита, сколько захотите. 

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

function MyComponent() {
const history = useHistory();
   function redirect() {
      history.push('/path');
   }

   return (
      <>
         <button onClick={redirect}>Some Button</button>
      </>
   );
}

export default MyComponent;
1 голос
/ 25 апреля 2020

Вместо этого вы можете использовать useHistory() ловушку от response-router-dom . Прочитайте из документации:

Хук useHistory дает вам доступ к экземпляру истории, который вы можете использовать для навигации.

Попробуйте выполнить следующее: 

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

function MyComponent({ myFunction }) { // here still you can pass other props
   let history = useHistory(); // meanwhile you have the history object

   function redirect() {
      history.push('/path');
   }

   return <>
      <button onClick={redirect}>Some Button</button>
   </>
}

export default MyComponent;

Если вам нужен полностью рабочий пример, найдите один из моих репозиториев на GitHub ниже: https://github.com/norbitrial/react-router-programmatically-redirect-examples

Предлагаю взглянуть на этот файл оттуда. Я уже включил приведенный выше важный рабочий пример в мой фрагмент кода.

Надеюсь, это поможет!

...