ReactJS Context API - программное перенаправление / навигация
index.js - файл
<AppProvider>
<BrowserRouter>
<div>
<Route exact path = "/" component = {Home} />
<Route exact path = "/balances" component = {Balances} />
</div>
</BrowserRouter>
</AppProvider>
В компоненте Home у меня есть кнопка, и ее нажатие на событие было успешно отправлено поставщику приложений.
<button className = "btn btn-primary">{context.Process_ToBalances}</button>
А в AppProvider у меня есть такой метод.
Process_ToBalances()
{
//pre process data
// Redirect to Balance page here
}
Но я понятия не имею, почему все методы перенаправления не сработали.
Я пробовал и browserHistory.push('/Balances'), и this.props.push("/Balances"), но все равно не смог.
это должно помочь вам stackoverflow.com/questions/44127739/…
Ответы 1
Чтобы использовать функциональность реактивного маршрутизатора в AppProvider, ваш маршрутизатор должен обернуть вас в компонент AppProvider, а ваш AppProvider должен получить свойства Router Props, вы можете сделать это, например
<BrowserRouter>
<AppProvider>
<div>
<Route exact path = "/" component = {Home} />
<Route exact path = "/balances" component = {Balances} />
</div>
</AppProvider>
</BrowserRouter>
а затем в AppProvider используйте withRouter
export default withRouter(AppProvider);
После этого вы можете использовать this.props.history.push('/balances), обратите внимание на путь с учетом регистра /balances, а не /Balances.
Обратитесь к этому вопросу для получения более подробной информации о How to Programmatically navigate using react-router
Когда я прочитал ваш комментарий, я обнаружил свою ошибку. Просто переместите AppProvider внутрь BrowserRouter, и он сможет использовать свойства BrowserRouter. Спасибо, ты сделал мой день
Пожалуйста, предоставьте минимальный воспроизводимый пример