Кто работал с @reach/router? Нужна помощь

я заюзал

но у меня 2 роута всего)

Кто работал с @reach/router? Нужна помощь

В чем проблема то

В чем проблема то

redirectTo в консоль выводит ошибки, но работает верно. Вот хотел узнать, как от них избавиться

redirectTo в консоль выводит ошибки, но работает верно. Вот хотел узнать, как от них избавиться

Какие ошибки? Он сам через выбрасывание ошибки работает

Какие ошибки? Он сам через выбрасывание ошибки работает

Ну вот как убрать из консоли ошибки?

Ну вот как убрать из консоли ошибки?

А не, перепутал с компонентом Redirect. У тебя реакт 16+?

А не, перепутал с компонентом Redirect. У тебя реакт 16+?

Да

Да

Какая ошибка то, скажи

Какая ошибка то, скажи

У меня такой декоратор import React, { Component } from 'react'; import { redirectTo } from '@reach/router'; export default (isPrivate = true, redirectUrl = '/auth', condition = localStorage.getItem('authorization')) => (WrappedComponent) => class extends Component { constructor(props, context) { super(props, context); this.state = { isPrivate, redirectUrl, condition }; } componentWillMount() { const { condition, isPrivate, redirectUrl } = this.state; if ((condition === null) !== isPrivate) redirectTo(redirectUrl); } render() { return <WrappedComponent { ...this.props } />; } }

У меня такой декоратор import React, { Component } from 'react'; import { redirectTo } from '@reach/router'; export default (isPrivate = true, redirectUrl = '/auth', condition = localStorage.getItem('authorization')) => (WrappedComponent) => class extends Component { constructor(props, context) { super(props, context); this.state = { isPrivate, redirectUrl, condition }; } componentWillMount() { const { condition, isPrivate, redirectUrl } = this.state; if ((condition === null) !== isPrivate) redirectTo(redirectUrl); } render() { return <WrappedComponent { ...this.props } />; } }

Зач те тут класс

Зач те тут класс

Дело не в классе

Дело не в классе

Просто используй тут navigate , redirect там так и работает

ребята, всем привет. подскажите, нормальная ли практика юзать в проекте реакт bootstrap через cdn или же все равно лучше использовать, например, условный react-bootstrap?

ребята, всем привет. подскажите, нормальная ли практика юзать в проекте реакт bootstrap через cdn или же все равно лучше использовать, например, условный react-bootstrap?

и так и так не нормально

уж лучше использовать material-ui в новой версии они сделали компоненты удобно кастомизируемыми и там довольно легко стилизовать их под тот же bootstrap

зато на выходе ты получаешь кучу преимуществ в виде совместимости со всеми браузерами, адаптивную верстку удобную

неплохо спроектированные компоненты

уж лучше использовать material-ui в новой версии они сделали компоненты удобно кастомизируемыми и там довольно легко стилизовать их под тот же bootstrap

благодарю.

https://material-ui.com/demos/text-fields/

зато на выходе ты получаешь кучу преимуществ в виде совместимости со всеми браузерами, адаптивную верстку удобную

У меня поповер вьебался в фаерфоксе

А-адаптивнл

У меня поповер вьебался в фаерфоксе

ну начнем с того, что посмотрим багтрекер фаерфокса :))) у неприятно удивимся

то они не умеют minHeight/minWidth, то еще чего нибудь по своему трактуют

а из-за этого flexbox-ы работают корявео пока напильником не пройдешься

Ребят, как сделать подгрузку картинок при SSR? чтобы их показывать только когда они уже загрузились, типа прелоада только не на каждую картинку отдельно, а на все сразу, что-то типа HOC и показывать 1 глобальный лоадер во время загрузки их всех. На клиенте я делал так: была функция создания картинок и промисы на все onLoad и после резолва общего промиса я уже показывал страницу с подгруженными картинками.

Всем привет! Кто пользовался ag-grid? Какие отзывы? https://github.com/ag-grid/ag-grid/tree/master/packages/ag-grid-react

У меня такой декоратор import React, { Component } from 'react'; import { redirectTo } from '@reach/router'; export default (isPrivate = true, redirectUrl = '/auth', condition = localStorage.getItem('authorization')) => (WrappedComponent) => class extends Component { constructor(props, context) { super(props, context); this.state = { isPrivate, redirectUrl, condition }; } componentWillMount() { const { condition, isPrivate, redirectUrl } = this.state; if ((condition === null) !== isPrivate) redirectTo(redirectUrl); } render() { return <WrappedComponent { ...this.props } />; } }

очень странная идея напрямую из компонента управлять редиректом на другой урл

очень странная идея напрямую из компонента управлять редиректом на другой урл

А как не странно? :)

А как не странно? :)

не странно, это когда компонент диспатчит экшин

все остальное странно :))

не странно, это когда компонент диспатчит экшин

Так это же не прямо компонент. Это декоратор

Правильно ли делать пропсы объектами, или лучше каждый проп отдельно прокидывать? И почему. <Comp config={…} /> <Comp q={} w={} e={} />

Так это же не прямо компонент. Это декоратор

а декоратор же будет прикручен к компоненту

а декоратор же будет прикручен к компоненту

Ну да. А как делать? У меня 2 роута /auth и /profile и они ридиректятся друг на друга, в зависимость от значения в localStorage

Следовательно нужен некий миллдвар, Вот я и решил через декоратор делать

Следовательно нужен некий миллдвар, Вот я и решил через декоратор делать

ну есть специальные мидлвари для этого всякие thunk, saga и прочие

либо свой собственный

главное, чтобы это происходило в правильном месте

ну есть специальные мидлвари для этого всякие thunk, saga и прочие

Это милдвари для редакса. Тут у меня нет никакой зависимости от глобального состояния

опять же react-router никто не отменял с его <Redirect ...

опять же react-router никто не отменял с его <Redirect ...

То есть @reach/router не имеет права на жизнь?

опять же react-router никто не отменял с его <Redirect ...

Да всё вокруг, да около. Вроде как четко спросил, как лучше :)

Кто не пришел на митап, тот ни разу не молодец

ну кстати, вы бы хоть за пару дней объявили списки, а не за день до митапа, я вот думал что пролетелел с регистрацией, так как на подобные мероприятия, обычно, ответ за 2-5 дней прилетает.

То есть @reach/router не имеет права на жизнь?

https://reach.tech/router/api/Redirect

там как раз есть пример того что тебе нужно как мне кажется

условный редирект без головной боли и танцев с бубнами

редирект здорового человека

по крайней мере это декларативный редирект

а не императивный

я и говорю

и с ssr не сломается

я и говорю

мне на минуточку почудился сарказм :)) сори

Котаны, а кто что знает про hyperscript вместо jsx? В новой конторе чуваки, у которых нет опыта реакта, топят за hyperscript , но ругают jsx за просто так: «не хочу мешать хтмл в жс» лол. Кмк, так этот hyperscript в тот же кофескрипт может перерасти. Но это может потому что я не трогал этот гиперскрипт

условный редирект без головной боли и танцев с бубнами

Мы вернулись в самое начало. Дохрена ошибок в консоли

Я что - то туплю. Но как можно withRouter из React Router 4 использовать для класса? ну кроме как export default withRouter(class);

Котаны, а кто что знает про hyperscript вместо jsx? В новой конторе чуваки, у которых нет опыта реакта, топят за hyperscript , но ругают jsx за просто так: «не хочу мешать хтмл в жс» лол. Кмк, так этот hyperscript в тот же кофескрипт может перерасти. Но это может потому что я не трогал этот гиперскрипт

Предложи им писать React.createComponent()

И всё.

Мы вернулись в самое начало. Дохрена ошибок в консоли

noThrow добавь, если на Redirect компонент переехал

Котаны, а кто что знает про hyperscript вместо jsx? В новой конторе чуваки, у которых нет опыта реакта, топят за hyperscript , но ругают jsx за просто так: «не хочу мешать хтмл в жс» лол. Кмк, так этот hyperscript в тот же кофескрипт может перерасти. Но это может потому что я не трогал этот гиперскрипт

это же может перерасти в HyperCoffeeTypeScript

ERROR: S client not available

Я что - то туплю. Но как можно withRouter из React Router 4 использовать для класса? ну кроме как export default withRouter(class);

@withRouter class ...

спасибо

export default compose( withRouter, )(Class)

noThrow добавь, если на Redirect компонент переехал

Спасибо

а лучше export default не использовать, лучше сначала константу, а потом export MyClass

пигут что export default негативно влияет на tree shaking

https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad

это конечно для большинства случаев может быть неактуально, но все же

Правильно ли делать пропсы объектами, или лучше каждый проп отдельно прокидывать? И почему. <Comp config={…} /> <Comp q={} w={} e={} />

^

Правильно ли делать пропсы объектами, или лучше каждый проп отдельно прокидывать? И почему. <Comp config={…} /> <Comp q={} w={} e={} />

ну надо разделять мух и котлеты в этом случае просто вот и все

понятное дело, что плохо засунуть в один пропс разнородные сущности

ну и типизация опять же упрощается когда раздельно

понятное дело, что плохо засунуть в один пропс разнородные сущности

у меня есть сущность Price, и каждый раз раскрывать ее и прокидывать все отдельно неудобно

кажется, что для конкретного проекта иметь такой компонент норм

ну делаешь <Component price={price} /> вполне норм

ну делаешь <Component price={price} /> вполне норм

ну да, это не разнородная сущность

я думаю тут проблема только в описании пропса с помощью PropTypes

или через flex

я думаю тут проблема только в описании пропса с помощью PropTypes

Price описан как тип во flow

т.е. если у тебя где то этот твой прайс типизирован, то какие проблемы

а лучше export default не использовать, лучше сначала константу, а потом export MyClass

А ты у себя в проектах отказался от default export?

А ты у себя в проектах отказался от default export?

полностью угу

но мне export default никогда не нравился

потому что я в webstorm работаю

и раньше были проблемы часто перейти на имплементацию такого дефолтного экспорта

потому что я в webstorm работаю

А что не так с export default в webstorm? :)

ну не хотел переходить и все :)) а так проблем не было :))

Можно как-то к axios подвязать что-то, чтобы к каждому запросу автоматически добавлялся, например, токен?

Можно как-то к axios подвязать что-то, чтобы к каждому запросу автоматически добавлялся, например, токен?

можно)

Можно как-то к axios подвязать что-то, чтобы к каждому запросу автоматически добавлялся, например, токен?

обертку свою пишешь и там добавляешь, либо интерцептор вешаешь на реквесты

Можно как-то к axios подвязать что-то, чтобы к каждому запросу автоматически добавлялся, например, токен?

в доке написано