ReactJS - передать реквизиты с компонентом Redirect
Как следует передавать реквизиты с компонентом Redirect, не отображая их в URL-адресе?
Нравится этот <Redirect to = "/order?id=123 />"? Пользуюсь react-router-dom.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вы можете использовать состояние истории браузера следующим образом:
<Redirect to = {{
pathname: '/order',
state: { id: '123' }
}} />
Затем вы можете получить к нему доступ через this.props.location.state.id
@DhruvSinghal Это означает, что ваш компонент не имеет доступа к свойствам маршрутизатора. Может быть, попробуйте обернуть свой компонент withRouter
@SagarKodte То же самое, мой был первым :)
Я получаю эту ошибку Expected an assignment or function call and instead saw an expression. Какие-либо предложения?
Вы можете передавать данные с помощью Redirect следующим образом:
<Redirect to = {{
pathname: '/order',
state: { id: '123' }
}}
/>
и вот как вы можете получить к нему доступ:
this.props.location.state.id
Документы API объясняет, как передавать состояние и другие переменные в опоре Redirect / History.
Нужен ли мне компонент BrowserHistory, чтобы это заработало?
Нет, не знаешь. Если вы используете любой маршрутизатор в своих маршрутах.
Огромное спасибо, отмечу ваш ответ как решение, как только истечет время таймера! :)
Это решение не соответствует спецификации истории браузера html 5, данные должны передаваться в объекте состояния.
@anas это то, что рекомендует автор библиотеки: github.com/ReactTraining/history#navigation
@SakhiMansoor в предоставленном вами URL-адресе написано, что вам следует использовать npm install history? Что делать, если я этого не сделал или уже есть в пакете react-router-dom?
@SakhiMansoor. Да, объект должен содержать значения pathname, search, state и т. д., Которые используются в истории браузера. Любые пользовательские значения должны быть включены в объект state, который находится на один уровень ниже. Он чище и отделяет то, что используется историей браузера, от вашего собственного настраиваемого объекта.
Спасибо @Anas и SakhiMansoor за помощь. Вы оба заслуживаете оценки за решение! :)
Да, я согласился с @Anas, но меня больше интересует какая-то конкретная причина этого?
Одна из причин: допустим, в следующем выпуске они добавят id в свой api, а теперь у вас конфликт.
Это одна из проблем. Но мы должны прочитать документы по миграции перед обновлением пакетов, и да, я бы отредактировал свой ответ. Кстати, спасибо, это тоже урок для меня.
@SakhiMansoor Я пробовал тот же код, но он дает мне эту ошибку: литерал объекта может указывать только известные свойства, а 'id' не существует в типе 'LocationDescriptor <any>'.
поделитесь своим кодом или задайте новый вопрос с указанием вашей проблемы. Спасибо
@SakhiMansoor <Перенаправить на = {{pathname: "/ app / AntennaAdd", id: "123"}} />; Спасибо большое
Очевидно, это работает <Redirect to = {{pathname: "/ app / AntennaAdd", state: {id: "123"}}} />;
Обновляю свой ответ, так как React-router внес изменения в свой API. Спасибо за указание на это. Состояние - идеальный способ хранения значений, поскольку они не конфликтуют с ключами, указанными в API, такими как имя пути и т. д.
Привет ... У меня проблемы с получением параметра состояния, переданного с перенаправлением. this.props.location дает мне undefined. Какие-либо предложения?
Это сработало для меня, но в моем случае мне нужно было использовать mydata: JSON.stringify(data) и JSON.parse(props.location.state.mydata), потому что я передавал объект.
@DhruvSinghal Здесь та же проблема. Вы нашли решение?
@ Sealer_05 Я перестал работать над React некоторое время назад ... Не очень хорошо помню, как я это решил. Попробуйте немного поэкспериментировать, чтобы выяснить это.
Я получаю this.props как undefined. Есть идеи, почему это так?
Можете ли вы поделиться кодами, песочницей или ссылкой на github, я мог бы изучить это
Если компонент, на который вы перенаправляете, является функциональным, используйте перехватчик useLocation React Router для доступа к объекту местоположения.
@SakhiMansoor в настоящее время пометил другой ответ как правильный. Не могли бы вы обновить свой контент до того, который в настоящее время отмечен? Отмеченный в настоящее время вариант можно было бы лучше объяснить, попробуйте :)
- Вы можете использовать свой собственный крючок для той же цели:
import { createBrowserHistory } from "history";
const withRefresh = createBrowserHistory({ forceRefresh: true });
const ROOT_PATH = process.env.PUBLIC_URL || "/myapp";
const useRedirectToAccounting = (params = "1") => {
if (params){
withRefresh.push({
pathname: `${ROOT_PATH}/create`,
state: { id: `${params}` }
});
}
}
export default redirectToAccounting;
- и используйте его как:
import useRedirectToAccounting from './redirectToAccounting
const handleOnClick = params => useRedirectToAccounting(params)
const RedirectorComponent = () => <a onClick = {handleOnClick}>{"Label"}</a>
** это может быть подвергнуто дальнейшему рефакторингу в зависимости от требований.
Сначала вы должны передать реквизиты в Route, где вы определили в своем App.js
<Route path = "/test/new" render = {(props) => <NewTestComp {...props}/>}/>
затем в вашем первом компоненте
<Redirect
to = {{
pathname: "/test/new",
state: { property_id: property_id }
}}
/>
а затем в вашем перенаправленном NewTestComp вы можете использовать его где угодно, как это
componentDidMount(props){
console.info("property_id",this.props.location.state.property_id);}
Недооцененный ответ - это полное решение; простое добавление строки в приведенных выше ответах не передает реквизиты должным образом.
Это ВАЖНАЯ часть. Просто и очень полезно, мягко говоря!
Помечен как новый правильный ответ, поскольку в нем больше информации.
Можете ли вы уточнить «тогда в вашем первом компоненте»? У меня проблемы со сборкой всего этого. какой компонент является «первым компонентом»?
@sammms не автор, но я считаю, что они имели в виду только компонент перенаправления. Вы можете добавить это к любому компоненту перенаправления, с которым вы хотите передавать реквизиты, при условии, что у компонента Route есть свойство рендеринга, установленное как функция. Подробнее о перенаправлении на и здесь для получения дополнительной информации о рендеринге маршрута
Когда я запускал этот код, это приводило к пустой странице, когда я возвращал Redirect.
<Redirect to = {{
pathname: '/path',
state: { id: '123' }
}} />
Затем вы можете получить к нему доступ через this.props.location.state.id в нужном компоненте.
this.props.location дает мне undefined. Какие-либо предложения?