Как мы можем передать параметр с помощью 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');
          });

IshanGarg

Ответов: 13

Ответы (13)

First of all, you need not do var r = this; as this in if statement refers to the context of the callback itself which since you are using arrow function refers to the React component context.

According to the docs:

history objects typically have the following properties and methods:

  • length - (number) The number of entries in the history stack
  • action - (string) The current action (PUSH, REPLACE, or POP)
  • location - (object) The current location. May have the following properties:

    • pathname - (string) The path of the URL
    • search - (string) The URL query string
    • hash - (string) The URL hash fragment
    • state - (string) location-specific state that was provided to e.g. push(path, state) when this location was pushed onto the stack. Only available in browser and memory history.
  • push(path, [state]) - (function) Pushes a new entry onto the history stack
  • replace(path, [state]) - (function) Replaces the current entry on the history stack
  • go(n) - (function) Moves the pointer in the history stack by n entries
  • goBack() - (function) Equivalent to go(-1)
  • goForward() - (function) Equivalent to go(1)
  • block(prompt) - (function) Prevents navigation

So while navigating you can pass props to the history object like

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

or similarly for the Link component or the Redirect component

 My Link 

and then in the component which is rendered with /template route, you can access the props passed like

this.props.location.state.detail

Also keep in mind that, when using history or location objects from props you need to connect the component with withRouter.

As per the Docs:

withRouter

You can get access to the history object’s properties and the closest 's match via the withRouter higher-order component. withRouter will re-render its component every time the route changes with the same props as render props: { match, location, history }.

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

есть отличное объяснение поста Тайлера МакГинниса на его сайте, Ссылка на пост

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

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

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

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

  3. в компоненте Home:

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

Расширение решения (предложено Шубхамом Хатри) для использования с перехватчиками 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 из response-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]);

};

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

В вашем Исходном компоненте

this.props.history.push (pathComponent, sendState);

pathComponent - целевой компонент, который получит состояние

В вашем целевом компоненте вы можете получить такое состояние, если используете компонент класса

  • Версия Javascript
конструктор (реквизит) {
  this.state = this.props.location.state
}
  • Версия машинописного текста
конструктор (реквизиты: {}) {
  const receiveState = this.props.location.state as StateType // вы должны проанализировать свой интерфейс состояния или ввести
  this.state = receiveState
}

Бонус

Если вы хотите сбросить полученное состояние. Используйте history, чтобы заменить местоположение, например

this.props.history ({pathName: currentPath, state: resetState})

currentPath - это целевой компонент путь resetState - это новое состояние значения, которое вы хотите

Пройдено

history.push({pathname:"/yourroute",state: {_id: "0001", name: "AZ"}})

Прочитать

import React from 'react';

const YourRoute = props=> {
    const { _id, name } = (props.location && props.location.state) || {};
        //_id and name will contain the passed data
     .
     .
     .

}

Здесь рабочий пример

Для использования 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 ( 
Some component stuff

To make API POST request and redirect to "/template" click a button API CALL

) }

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

Я создал собственный перехватчик useQuery

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

const useQuery = (): URLSearchParams => {
  return new URLSearchParams(useLocation().search)
}

export default useQuery

Используйте его как

const query = useQuery();
const id = query.get("id") as string

Отправьте так

history.push({  
 pathname: "/template",
 search: `id=${values.id}`,
});
                  

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

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

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

Чтобы использовать функциональный компонент React 16.8 (withHooks), вы можете использовать его следующим образом
Мы отправляем PhoneNumber на следующую страницу
Login.js

    import { useHistory } from 'react-router-dom';
    const history = useHistory();
        const handleOtpVerify=(phoneNumber)=>
          {
               history.push("/OtpVerifiy",{mobNo:phoneNumber})
          } 


OtpVerify.js

    import  useLocation  from 'react-router-dom';
    const [phoneNumber, setphoneNumber] = useState("")
        useEffect(() => {
                setphoneNumber(location.state.mobNo)
            }, [location]);
    return (
    

We have sent Verification Code to your

{phoneNumber}

)

Реагировать на TypeScript с хуками

Из класса

  this.history.push({
      pathname: "/unauthorized",
      state: { message: "Hello" },
    });

Несанкционированный функциональный компонент

interface IState {
  message?: string;
}

export default function UnAuthorized() {
  const location = useLocation();
  const message = (location.state as IState).message;

  return (
    
{message}
); }

Не обязательно использовать withRouter. У меня работает:

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


   
         (
          
        )} />

         (
          
          )} /> 
      

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

this.props.history

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

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

    history.push ('/ [pathToSomeWhere]', yourData);
    

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

    this.props.location.state // он равен yourData
    
  2. Для более новых версий вышеуказанный способ работает хорошо, но есть новый способ:

    history.push ({
      путь: '/ [pathToSomeWhere]',
      состояние: yourData,
    });
    

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

    • Компонент класса

      this.props.location.state; // он равен yourData
      
    • Функциональный компонент

      const location = useLocation ();
      location.state; // он равен yourData
      

Иногда потребуется использовать компонент Link или NavLink вместо использования функции history.push. вы можете использовать, как показано ниже:

<Ссылка
  to = {{
    путь: '/ [pathToSomeWhere]',
    состояние: yourData
  }}
>
  ...

Подсказка: в последней версии следует использовать состояние имя ключа.

можно использовать,

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

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

const state = this.props.location.state

Подробнее о React Управление историей сеансов

2022 WebDevInsider