Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.06.2021, 20:12
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,217

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

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

Нашел старые варианты, но они не рабочие (типа этого)
https://reactdev.ru/router/programmiruem_perehodi/
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2021, 03:06
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,813

Шо?
const H = useHistory();

H.push('/foo')

Это еся юзается react-router. Мож у тя какой-то другой роутер?
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2021, 23:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,217

Сообщение от Aetae
Это еся юзается react-router. Мож у тя какой-то другой роутер?
Тестовый пример могу предоставить только в понедельник... Сейчас семья и дача.
Используем react-router или react-router-dom.

Сообщение от Aetae
useHistory()
У кого сей метод? Импортировать из react-router?
Ответить с цитированием
  #4 (permalink)  
Старый 19.06.2021, 23:42
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,217

Сообщение от Aetae
const H = useHistory();
Используя твою наводку, нашел еще такую статейку...
https://xakplant.ru/2019/07/16/ис...а-и-фун/
Ответить с цитированием
  #5 (permalink)  
Старый 19.06.2021, 23:51
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,217

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

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

У нас react-router-dom используется и роутинг как раз такой же.
Т.ч. завтра ребятам покажу - пусть пробуют.
Спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 21.06.2021, 10:15
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,217

Провел ряд тестов "в поисках 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 уже нам не доступно.
Ответить с цитированием
  #7 (permalink)  
Старый 21.06.2021, 10:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,217

Сообщение от 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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переход по локальной ссылке срабатывает только один раз gnplsk Events/DOM/Window 1 09.07.2016 18:50
Плавный переход к элементу по внешней ссылке deniskutovskiy jQuery 13 16.10.2015 22:30
Переход по метке <a href = #metka> с нажатием в <ul><li> papacoca (X)HTML/CSS 2 01.10.2014 14:09
JS и getURL плавный переход к anchor Blizzart Общие вопросы Javascript 4 16.01.2011 16:48
Форма и 3 кнопки, Как реализовать переход? jsuse Элементы интерфейса 1 10.04.2010 20:52