Как передать параметры с помощью history.push / Link / Redirect в реакции-маршрутизаторе v4?

Как мы можем передать параметр this.props.history.push('/page')в React-Router v4?

.then(response => {
       var r = this;
        if (response.status >= 200 && response.status < 300) {
             r.props.history.push('/template');
          });

Прежде всего, вам не нужно делать var r = this;это, поскольку это if statementотносится к контексту самого обратного вызова, который, поскольку вы используете функцию стрелки, относится к контексту компонента React.

Согласно документам:

Объекты истории обычно имеют следующие свойства и методы:

• длина - (число) Количество записей в стеке истории
• action - (строка) Текущее действие (PUSH, REPLACE или POP)

• Местоположение - (объект) Текущее местоположение. Может иметь следующие свойства:

  • путь - (строка) путь URL
  • поиск - (строка) Строка запроса URL
  • hash - (строка) URL-фрагмент хеша
  • состояние - (строка) специфичное для местоположения состояние, которое было предоставлено, например, push (путь, состояние), когда это местоположение было помещено в стек. Доступно только в браузере и истории памяти.
• push (путь, [состояние]) - (функция) Добавляет новую запись в стек истории
• replace (путь, [состояние]) - (функция) Заменяет текущую запись в стеке истории
• go (n) - (function) Перемещает указатель в стеке истории на n записей
• goBack () - (function) Эквивалент go (-1)
• goForward () - (function) Эквивалент go (1)
• блок (подсказка) - (функция) Предотвращает навигацию

Таким образом, во время навигации вы можете передавать реквизиты для объекта истории, как

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: { detail: response.data }
})

или аналогично для Linkкомпонента или Redirectкомпонента

<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>

а затем в компоненте, который отображается с /templateмаршрутом, вы можете получить доступ к пропущенным реквизитам, как

this.props.location.state.detail

Также имейте в виду, что при использовании объектов истории или местоположения из реквизита необходимо подключить компонент withRouter.

Согласно документам:

withRouter

Вы можете получить доступ к свойствам объекта истории и ближайшему <Route>'sсовпадению через withRouterкомпонент высшего порядка. withRouter будет повторять рендеринг своего компонента каждый раз, когда маршрут изменяется с теми же параметрами, что и <Route>рендер props: { match, location, history }.

ты можешь использовать,

this.props.history.push("/template", { ...response }) или this.props.history.push("/template", { response: response })

тогда вы можете получить доступ к проанализированным данным из /templateкомпонента, следуя коду,

const state = this.props.location.state

Узнайте больше о React Session History Management

• Для более ранних версий:

  history.push('/path', yourData);

  И получите данные в связанном компоненте, как показано ниже:

  this.props.location.state // it is equal to yourData

• Для более новых версий вышеуказанный способ работает хорошо, но есть новый способ:

  history.push({
    pathname: '/path',
    customNameData: yourData,
  });

  И получите данные в связанном компоненте, как показано ниже:

  this.props.location.customNameData // it is equal to yourData

Подсказка : stateимя ключа использовалось в более ранних версиях, а для более новых версий вы можете использовать свое пользовательское имя для передачи данных, и использование stateимени не является обязательным.

Расширение решения (предложенного Шубхам Хатри) для использования с крючками React (16.8 и далее):

package.json (always worth updating to latest packages)

{
     ...

     "react": "^16.12.0",
     "react-router-dom": "^5.1.2",

     ...
}

Передача параметров с историей push:

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

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;

Доступ к переданному параметру с использованием useLocation из'act-router-dom ':

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};

Если вам нужно передать параметры URL

Theres большое сообщение объяснение Тайлер Макгиннис на своем сайте, ссылка на пост

Вот примеры кода:

1. на компоненте history.push:

   this.props.history.push(`/home:${this.state.userID}`)

2. на компоненте роутера вы определяете маршрут:

   <Route path='/home:myKey' component={Home} />

3. на домашнем компоненте:

componentDidMount(){
    const { myKey } = this.props.match.params
    console.log(myKey )
}

Не нужно использовать с рутером. Это работает для меня:

На вашей родительской странице

<BrowserRouter>
   <Switch>
        <Route path="/routeA" render={(props)=> (
          <ComponentA {...props} propDummy={50} />
        )} />

        <Route path="/routeB" render={(props)=> (
          <ComponentB {...props} propWhatever={100} />
          )} /> 
      </Switch>
</BrowserRouter>

Затем в ComponentA или ComponentB вы можете получить доступ

this.props.history

объект, включая метод this.props.history.push.

Чтобы использовать React 16.8+ (с крючками), вы можете использовать этот способ

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

export default function SomeFunctionalComponent() {
let history = useHistory(); // should be called inside react component

const handleClickButton = () => {    
"funcionAPICALL"
       .then(response => {
             if (response.status >= 200 && response.status < 300) {
                 history.push('/template');
              });
}

return ( <div> Some component stuff 
    <p>To make API POST request and redirect to "/template" click a button API CALL</p>
    <button onClick={handleClickButton}>API CALL<button>
</div>)
} 

Источник здесь, чтобы прочитать больше https://reacttraining.com/react-router/web/example/auth-workflow

Добавить информацию, чтобы получить параметры запроса.

const queryParams = new URLSearchParams(this.props.location.search);
console.log('assuming query param is id', queryParams.get('id');

Для получения дополнительной информации о URLSearchParams проверьте эту ссылку URLSearchParams