ReSQL.ru
     
powered by simpleCommunicator - 2.0.41     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [React.js] Программный переход по УРЛ
8 сообщений из 8, страница 1 из 1
[React.js] Программный переход по УРЛ
    #40078741
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Пока не могу понять как програмно выполнить переход на некий УРЛ в пределах приложения.

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

Нашел старые варианты, но они не рабочие (типа этого)
https://reactdev.ru/router/programmiruem_perehodi/
...
Рейтинг: 0 / 0
18.06.2021, 20:23
| Ответить | Цитировать | Написать  
[React.js] Программный переход по УРЛ
    #40078806
Фотография Relic Hunter
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Relic Hunter
Участник
https://www.pluralsight.com/guides/how-to-router-redirect-after-login
https://www.pluralsight.com/guides/how-to-transition-to-another-route-on-successful-async-redux-action

реакт - тело тонкое! ключевой компонент <Redirect to={}> и условновнй рендеринг.
...
Рейтинг: 0 / 0
18.06.2021, 23:58
| Ответить | Цитировать | Написать  
[React.js] Программный переход по УРЛ
    #40078942
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Relic Hunter , у нас не такие "навороты", т.ч. особо мне эти ссылки не помогут...

Но по наводке с другого форума нашел вот чего
https://xakplant.ru/2019/07/16/использование-истории-браузера-и-фун/

YouTube Video
YouTube Video
...
Рейтинг: 0 / 0
20.06.2021, 10:31
| Ответить | Цитировать | Написать  
[React.js] Программный переход по УРЛ
    #40078981
Фотография Имя пользователя1
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Имя пользователя1
Участник
krvsa,

Код: javascript
1.
2.
3.
4.
5.
import { useHistory } from 'react-router-dom'

// в компоненте или твоем пользовательском хуке
const history = useHistory() // тот самый экземпляр, который поехал в Router в корне приложения
history.push(...)
...
Рейтинг: 0 / 0
20.06.2021, 17:35
| Ответить | Цитировать | Написать  
[React.js] Программный переход по УРЛ
    #40079005
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Завтра расскажу ребятам - пусть пробуют. :)
...
Рейтинг: 0 / 0
20.06.2021, 19:20
| Ответить | Цитировать | Написать  
[React.js] Программный переход по УРЛ
    #40079081
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Провел ряд тестов "в поисках history"...

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

app.js
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
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
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
const Home = (props) => {
	console.log(props)
	function test() {
		alert('Ok')
	}
	return (
		<button onClick={test}>Go</button>
	)
}

export default Home


То history в props есть и можно делать
Код: javascript
1.
history.push('/test')



У нас же используется такой вариант роутинга
app.js
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
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 уже нам не доступно. :(
...
Рейтинг: 0 / 0
21.06.2021, 10:28
| Ответить | Цитировать | Написать  
[React.js] Программный переход по УРЛ
    #40079085
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
krvsa
И history уже нам не доступно. :(

=ksaИ history уже нам не доступно.
Но, если сделать, как советовали на другом форуме - уже работает и с нашим вариантом
home.js
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
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
...
Рейтинг: 0 / 0
21.06.2021, 10:36
| Ответить | Цитировать | Написать  
[React.js] Программный переход по УРЛ
    #40087558
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
private
Участник
У риакта принципиальная проблема с роутингом. Это уровень модели, изменения состояния модели. Но по какой то непонятной причине все риактовские библиотеки роутинга пихают его во вью. Из за этого собственно и конфуз типа этого вопроса.

Что делать, использовать вью как делают все хоть и получается криво, потому что иначе прийдется идти против ветра и изобретать свои велосипеды...

А вообще лучше забить на риакт и использоват свелте. Половину кода можно будет выкинуть сразу.
...
Рейтинг: 0 / 0
01.08.2021, 01:48
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [React.js] Программный переход по УРЛ
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru             Фотоальбом: Участники, Встречи
Закрыть
start [/forum/search_topic.php?author=Maxim696&author_mode=last_posts&do_search=1]:
 0ms
get settings:
 10ms
get forum list:
 14ms
get settings:
 8ms
get forum list:
 10ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 27ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 50ms
get tp. blocked users:
 2ms
others: 9829ms
total:  9967ms
созд. / загр.: 9967ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]