Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [React.js] Программный переход по УРЛ / 8 сообщений из 8, страница 1 из 1
18.06.2021, 20:23
    #40078741
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[React.js] Программный переход по УРЛ
Пока не могу понять как програмно выполнить переход на некий УРЛ в пределах приложения.

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

Нашел старые варианты, но они не рабочие (типа этого)
https://reactdev.ru/router/programmiruem_perehodi/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.06.2021, 23:58
    #40078806
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[React.js] Программный переход по УРЛ
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
| Ответить | Цитировать | Написать  
20.06.2021, 10:31
    #40078942
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[React.js] Программный переход по УРЛ
Relic Hunter , у нас не такие "навороты", т.ч. особо мне эти ссылки не помогут...

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

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

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

// в компоненте или твоем пользовательском хуке
const history = useHistory() // тот самый экземпляр, который поехал в Router в корне приложения
history.push(...)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.06.2021, 19:20
    #40079005
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[React.js] Программный переход по УРЛ
Завтра расскажу ребятам - пусть пробуют. :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.06.2021, 10:28
    #40079081
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[React.js] Программный переход по УРЛ
Провел ряд тестов "в поисках 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:36
    #40079085
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[React.js] Программный переход по УРЛ
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
| Ответить | Цитировать | Написать  
01.08.2021, 01:48
    #40087558
private
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[React.js] Программный переход по УРЛ
У риакта принципиальная проблема с роутингом. Это уровень модели, изменения состояния модели. Но по какой то непонятной причине все риактовские библиотеки роутинга пихают его во вью. Из за этого собственно и конфуз типа этого вопроса.

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

А вообще лучше забить на риакт и использоват свелте. Половину кода можно будет выкинуть сразу.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [React.js] Программный переход по УРЛ / 8 сообщений из 8, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 266ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1443212]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 160ms
get topic data:
 12ms
get forum data:
 2ms
get page messages:
 47ms
get tp. blocked users:
 2ms
others: 13ms
total:  266ms
x
x
Закрыть


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