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

Question

Как передать параметры с history.push в реакции-маршрутизатор 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');
          });

392

reactjs react-router

Источник

user5658880 22 май '17 в 19:53

13 ответов

Другие вопросы по тегам reactjs react-router

user5928186 23 июл '17 в 08:41 2017-07-23 08:41 · Answer 1 · 2017-07-23 08:41

Прежде всего, вам не нужно делать 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 },

user2875250 17 фев '20 в 08:56 2020-02-17 08:56 · Answer 2 · 2020-02-17 08:56

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

};

user6877799 23 мар '20 в 11:07 2020-03-23 11:07 · Answer 3 · 2020-03-23 11:07

Для более ранних версий:
```
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 имя не имеет значения.

user11265540 12 май '19 в 10:29 2019-05-12 10:29 · Answer 4 · 2019-05-12 10:29

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

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

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

const state = this.props.location.state

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

52

Источник

user11265540 12 май '19 в 10:29

user10623924 08 ноя '18 в 13:19 2018-11-08 13:19 · Answer 5 · 2018-11-08 13:19

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

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

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

на компоненте history.push:
this.props.history.push(/home:${this.state.userID})
на компоненте роутера вы определяете маршрут:
<Route path='/home:myKey' component={Home} />
на домашнем компоненте:
componentDidMount(){ const { myKey } = this.props.match.params console.log(myKey ) }

user12572256 19 авг '20 в 01:17 2020-08-19 01:17 · Answer 6 · 2020-08-19 01:17

Реагируйте на 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 (
    <div className="jumbotron">
      <h6>{message}</h6>
    </div>
  );
}

user7292898 16 мар '21 в 11:26 2021-03-16 11:26 · Answer 7 · 2021-03-16 11:26

Проходить

      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 data passed data
     .
     .
     .

}

Вот рабочий пример

12

Источник

user7292898 16 мар '21 в 11:26

user2188275 11 окт '20 в 20:48 2020-10-11 20:48 · Answer 8 · 2020-10-11 20:48

Я создал собственный перехватчик 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}`,
});

6

Источник

user2188275 11 окт '20 в 20:48

user16296044 01 июл '21 в 08:41 2021-07-01 08:41 · Answer 9 · 2021-07-01 08:41

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

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

<button onClick={handleOtpVerify}> Submit </button>

OtpVerify.js

          import  useLocation  from 'react-router-dom';
    const [phoneNumber, setphoneNumber] = useState("")
        useEffect(() => {
                setphoneNumber(location.state.mobNo)
            }, [location]);
    return (
    <p>We have sent Verification Code to your</p>
    <h1>{phoneNumber}</h1>
    )

user11053805 08 фев '21 в 18:23 2021-02-08 18:23 · Answer 10 · 2021-02-08 18:23

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

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

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

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

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

Версия Javascript

      constructor(props) {
  this.state = this.props.location.state
}

Версия машинописного текста

      constructor(props: {}) {
  const receiveState = this.props.location.state as StateType // you must parse into your state interface or type
  this.state = receiveState
}

Бонус

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

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

currentPathпуть к целевому компонентуresetState это новое значение, указывающее, что вы хотите

user90259 11 июл '18 в 04:58 2018-07-11 04:58 · Answer 11 · 2018-07-11 04:58

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

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

<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.

user9520665 03 дек '19 в 01:08 2019-12-03 01:08 · Answer 12 · 2019-12-03 01:08

Чтобы использовать 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

user6569518 22 янв '18 в 21:27 2018-01-22 21:27 · Answer 13 · 2018-01-22 21:27

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

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

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

-3

Источник

user6569518 22 янв '18 в 21:27