[React.js] Программный переход по УРЛ

[ksa]

Пока не могу понять как програмно выполнить переход на некий УРЛ в пределах приложения.

Т.е. у нас есть роутинг по страницам, работает нормально (пример могу предоставить в понедельник)... По <Link> переход работает.
Но теперь нужно отработать событие нажатия на кнопку. Там идет отправка запросов на сервер и в случае успеха нужно выполнить переход на некую страницу (в пределах приложения SPA).

Нашел старые варианты, но они не рабочие (типа этого)
https://reactdev.ru/router/programmiruem_perehodi/

[Aetae]

Шо?

const H = useHistory();

H.push('/foo')

Это еся юзается react-router. Мож у тя какой-то другой роутер?

[ksa]

Это еся юзается react-router. Мож у тя какой-то другой роутер?

Тестовый пример могу предоставить только в понедельник... Сейчас семья и дача.
Используем react-router или react-router-dom.

useHistory()

У кого сей метод? Импортировать из react-router?

[ksa]

const H = useHistory();

Используя твою наводку, нашел еще такую статейку...
https://xakplant.ru/2019/07/16/ис�...�а-и-фун/

[ksa]

Вот еще нашел видос и это и есть наш случай!

https://www.youtube.com/watch?v=VBw3EOtmz-k

У нас react-router-dom используется и роутинг как раз такой же.
Т.ч. завтра ребятам покажу - пусть пробуют.
Спасибо.

[ksa]

Провел ряд тестов "в поисках history"...

Если делать так

app.js

import React from 'react'
import {
	BrowserRouter,
	Route,
	Switch
} from 'react-router-dom'
import Home from './home'
import Test from './test'
import './app.css';

class App extends React.Component {
	render() {
		return (
			<BrowserRouter>
				<Switch>
					<Route exact path='/' component={Home}/>
					<Route path='/test' component={Test} />
				</Switch>
			</BrowserRouter>
		)
	}
}

export default App;

home.js

const Home = (props) => {
	console.log(props)
	function test() {
		alert('Ok')
	}
	return (
		<button onClick={test}>Go</button>
	)
}

export default Home

То history в props есть и можно делать

history.push('/test')

У нас же используется такой вариант роутинга
app.js

import React from 'react'
import {
	BrowserRouter,
	Route,
	Switch
} from 'react-router-dom'
import Home from './home'
import Test from './test'
import './app.css';

class App extends React.Component {
	constructor(props) {
		super(props)
		this.state = {primer: '123'}
	}
	render() {
		return (
			<BrowserRouter>
				<Switch>
					<Route exact path='/'>
						<Home  data={this.state} />
					</Route>
					<Route path='/test' component={Test} />
				</Switch>
			</BrowserRouter>
		)
	}
}

export default App;

И history уже нам не доступно.

[ksa]

И history уже нам не доступно.

Если сделать, как советовал Aetae - уже работает и с нашим вариантом
home.js

import {useHistory} from 'react-router-dom'

const Home = (props) => {
	console.log(props)
	const h = useHistory()
	function test() {
		h.push('/test')
	}
	return (
		<button onClick={test}>Go</button>
	)
}

export default Home