@Chetson
front-end разработчик

Каким образом можно в компоненте-контейнере управлять URI react-redux-router v4?

react-create-app был создан проект и выкат конфигов для webpack.
Собрано все по рекомендации многих ютуберов (в том числе и зарубежных)
Те кто занимается этим давно - трудности не составит.

В общем - как сделать так чтобы любой компонент или контейнер мог менять URI и вообще управлять роутингом внутри приложения из любого места без многочисленного проброса потомкам this.props.history, который позволяет вызвать this.props.history.push('/catalog/')

Зачем все это нужно?

Организация поисковой строки на сайте (это отдельный независимый компонент, который можно встроить куда угодно)
К примеру: мы на главной странице, есть строка поиска, мы вводим запрос и жмем "найти", нас с URI = / перекидывает на URI = /catalog/all?q=<строка_запроса>
Второй случай: находимся внутри категории URI = /catalog/auto, и хотим поискать внутри, то после отправки поискового запроса будет нечто такое URI = /catalog/auto?q=<строка_запроса>

Сама структура проекта:
index.js - инициализирует все приложение
App.js подключает роуты
routes/index.js - список роутов и компонентов
const routes = (
  <main>
    <Header />
    <Switch>
      <Route exact path="/" component={props => <Index {...this.props} />} />
      <Route exact path="/catalog" component={Catalog} />
      <Route exact path="/catalog/:category" component={Catalog} />
      <Route exact path="/catalog/:category/:product" component={Product} />
    </Switch>
    <Footer />
  </main>
)


В этом месте кода еще есть тот самый this.props.history
Далее я передаю props в компонент Index чтобы там дальше передать в компонент Search и при Нажатии на Энтер или клике по Лупе он бы меня отправил на другой URI, но - кто бы мог подумать, this.props.history теряется, и вообще такой способ нерентабелен для ReactRedux приложения. По-любому существует другой способ через mapDispatchToProps или StateToProps, но я никак не могу найти решение.
  • Вопрос задан
  • 236 просмотров
Пригласить эксперта
Ответы на вопрос 1
SuperPosan
@SuperPosan
Бандит
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { routerMiddleware, push } from 'react-router-redux'

const middleware = routerMiddleware(browserHistory)
const store = createStore(
  reducers,
  applyMiddleware(middleware)
)

store.dispatch(push('/foo'))


И диспатчить откуда душе угодно
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы