Як передати парами з history.push / Link / перенаправлення в реактор-маршрутизатор 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.

Згідно з документами:

Об'єкти історії зазвичай мають такі властивості та методи:

• length - (кількість) Кількість записів у стеку історії
• дія - (рядок) Поточна дія (PUSH, REPLACE або POP)

• location - (об'єкт) Поточне місцеположення. Можуть мати такі властивості:

  • pathname - (рядок) Шлях URL-адреси
  • search - (рядок) Рядок запиту URL
  • хеш - (рядок) фрагмент хеша URL-адреси
  • state - (рядковий) стан, специфічний для місцеположення, який надається, наприклад, push (шлях, стан), коли це місце було висунуте на стек. Доступний лише в історії браузера та пам'яті.
• push (шлях, [стан]) - (функція) Натискає новий запис на стек історії
• Замінити (шлях, [стан]) - (функція) Замінює поточний запис у стеку історії
• go (n) - (function) Переміщує вказівник у стеку історії на n записів
• goBack () - (функція) Еквівалентно йти (-1)
• goForward () - (функція) еквівалентно йти (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.

Відповідно до Документів:

зРутер

Ви можете отримати доступ до властивостей об’єкта історії та найближчої <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

• Для більш ранніх версій:

  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",

     ...
}

Передача параметрів з натисканням історії:

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 від 'react-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

Там чудове пояснення Тайлера МакГінніса на своєму сайті, Посилання на пост

ось приклади коду:

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 )
}

Не обов'язково використовувати withRouter. Це працює для мене:

На своїй батьківській сторінці

<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+ (withHooks) ви можете скористатися цим способом

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